2024年最新Vue3 全家桶，从 0 到 1 实战项目(1)，系列篇

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

此时运行项目的时候就能看到新建的 index.vue 的内容了。

三、vue-router4 结合 composition API 使用

---

3.1、composition API

composition API 中文叫做组合式API，它是 Vue3 特有的，同时 vue3 也能够向下兼容 Options API。

setup 函数就是 composition API 的入口，是处于生命周期钩子函数 beforeCreate 和 created 两个函数之间，所以 setup 中的属性和方法在外部使用时，需要先 return 暴漏出去。

修改 index.vue 组件，采用 composition API 。

3.2、响应式数据

上述的实例中中，如果我们在 template 内，打印 msg 的时候，就会发现响应式失效。

{{ msg }}

是因为在 setup 内地自定义属性不具备响应式能力。vue3 的响应式原理是 通过底层代理 proxy 将数据包装一下，使得具有响应式。vue3 的响应式原理详情可查看《vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能？》——vue3 的 setup 如何实现响应式功能？》")

此处 msg 是一个基础数据类型，可以通过 ref 包装下数据，ref 使用之前需要从 vue 中先引入。修改 script 中的代码

此时在 input 或在 setup 内改变 msg 的值,如：

此时无论如何修改 msg 都会保证实时响应。

与 ref 类似的还有 reactive 。ref 是让基础数据类型具有响应式，reactive 是让引用数据类型具有响应式。

3.3、组合式内如何使用路由？

一个项目中，导航选项卡是很常见的，在 App.vue 文件内，加入两个导航：

首页

我的

如果把上述路由跳转方式修改成 push 时，如何修改呢？

composition API 内使用路由时，需要先导入 userRouter 方法，调用该方法，生成 router。

如：

import { useRouter } from ‘vue-router’

const router = useRouter()

router 是路由【导航对象】。

想要获取当前路由时，使用 useRoute 方法，如：

import { useRoute } from ‘vue-router’

const route = useRoute()

route 是当前激活的路由状态信息对象，包含所有路由中的参数，params, query 都属于它。

修改上边路由跳转方式使用 push ，代码如下：

首页

<button @click=“go”>我的

路由传参以及参数获取，只需要把之前的 this.$router 换成 router 就可以啦。

四、vuex 4

---

vuex 是专为 vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在 vue3 中使用的是 vuex4 。vuex4 提供了和 vuex3 相同的 API 。

安装：

npm install vuex@next

package.json 检查版本

“dependencies”: {

“vue”: “^3.2.25”,

“vue-router”: “^4.0.12”,

“vuex”: “^4.0.2”

}

4.1、引入 vuex 状态管理

vuex4 创建 store 实例时，使用 createStore 函数创建，createStore 在使用之前需要先引入。

在 src 目录下，新建 store 文件夹下建 index.js ：

import { createStore } from “vuex”

// 创建新的 store 实例

const store = createStore({

state: {

name:‘前端人’

},

getters: { },

mutations: { },

actions: { },

modules: { }

})

export default store

在 main.js 中将 store 实例作为插件安装。

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from “./router/index”

import store from “./store/index”

createApp(App).use(router).use(store).mount(‘#app’)

4.2、获取状态信息

在 App.js 文件内，使用状态信息，这与 vuex3 使用方式相同。

获取 state 内的状态信息

{{ this.$store.state }}

获取 getters 内的属性

{{ this.$store.getters.getName }}

五、vuex 结合 composition API

---

在 组合式 API 中使用 store 时，需要使用 useStore 把 store 引入组件，然后才能操作。

useStore 使用之前，需要先引入，然后调用。

5.1、操作 vuex 状态信息

vuex 中同步操作数据是由 commit 调用 mutations 内的方法，异步操作是 dispatch 调用 actions 内的方法。

示例1：mutations 内方法修改 name 的值。

// 在 index.js 内

mutations: {

changeName(state,data) {

//data 是传入要修改的值

state.name = data

}

}

//App.vue 内

示例1：actions 内方法修改 name 的值。

actions 内的方法是没有办法直接操作 state 的状态信息，只有 mutations 内的方法才可以，所以需要调用 mutations 的方法，实现修改 。

index.js 代码

import { createStore } from “vuex”

const store = createStore({

state: {

name:‘前端人’

},

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ript>

示例1：actions 内方法修改 name 的值。

actions 内的方法是没有办法直接操作 state 的状态信息，只有 mutations 内的方法才可以，所以需要调用 mutations 的方法，实现修改 。

index.js 代码

import { createStore } from “vuex”

const store = createStore({

state: {

name:‘前端人’

},

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】