大家好，我叫东东吖，你现在看到的是vue进阶系列，如果觉得不错，可以点赞收藏哦，喜欢我的朋友，还可以加个关注鸭。

vue进阶系列包括以下内容：

前言：

vue3.0都没学完，vue3.2又来了，你还学得动吗？（手动滑稽）

vue3.2与vue3.0在语法上存在以下区别: \ vue3.0版本：变量和方法必须return出来才能使用。\ vue3.2版本：只需要在script标签上加上setup属性，不需要再把变量和方法return出去，代码更加简洁。

本文将重点将重点介绍vue3.2版本的语法，如果对vue3还没有完全接触过的小伙伴，可以先移步去我这篇文章热热身哦。前端技术日新月异，vue3.0的时代已经来临...

创建项目：

vite脚手架创建项目: vue3+vite2+ts npm create vite@latest

一.组件结构

```

二.data

```

三.method

```

四.computed

```

五.父传子

``` //父组件:

```

``` //子组件：

```

六.子传父

``` //父组件：

```

``` //子组件：

```

七.原型链绑定和组件使用

``` //main.ts

// 创建vue实例 const app=createApp(App) // 获取原型 const prototype = app.config.globalProperties // 绑定参数 prototype.name = '我是挂载在全局上的属性' ```

``` //组件内获取使用

//引入 import { getCurrentInstance } from "vue"; // 获取原型 const { proxy } = getCurrentInstance(); // 输出 console.log(proxy.name);

```

八.任意组件通信mitt.js

Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。

九.双向绑定v-model

``` //父组件：

//子组件：

```

十.nextTick

```

子组件：

```

十一.插槽

``` //子组件：

```

``` //父组件：

//页面展示情况：

我是默认插槽

我是具名插槽1

我是具名插槽2

我是具名插槽3

作用域插槽——姓名：东东吖，年龄25岁 ```

十二.路由useRoute和useRouter

``` //新建router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; const routes: Array = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: () => import('../pages/home/Index.vue'), meta: { showFooter: true, requireAuth: false, } }, { path: '/about', name: 'about', component: () => import( '../pages/about/Index.vue'), meta: { showFooter: true, requireAuth: false, } },

];

const router = createRouter({ history: createWebHashHistory(), routes, });

export default router; ```

``` //在main.ts将路由router注册 import { createApp } from 'vue' import App from './App.vue' import router from './router/index.ts'

const app=createApp(App) app.use(router).mount('#app')

```

``` //在页面打印结果

import { useRouter, useRoute } from "vue-router";

// 必须先声明调用 const router = useRouter(); const route = useRoute();

// 路由信息 console.log("router", router); console.log("route",route); ```

十三.路由守卫

``` // 路由守卫

router.beforeEach((to, from, next) => { console.log("to",to); console.log("from",from); next() })

```

十四.生命周期

选项式 API 的生命周期选项和组合式 API 之间的映射

~~beforeCreate~~ -> 使用 setup()
~~created~~ -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activated -> onActivated
deactivated -> onDeactivated

十五.store

vuex

Vue3 中的Vuex不再提供辅助函数写法，想要学习vuex的伙伴可以移步我这篇文章。vue进阶之路：vuex五大核心概念，看完这篇文章就够了。

Pinia、 vue3更加推荐的是pinia，2021年11月24日，尤大在 Twitter 上宣布：Pinia 正式成为 Vue 官方的状态库，意味着 Pinia 就是 Vuex 5，让我们全面拥抱pinia吧！

① 基础使用流程 ``` //下载pinia

npm install pinia -S ```

``` //main.ts

import { createApp } from 'vue' import App from './App.vue' import router from './router/index.ts'

// 引入pinia import { createPinia } from 'pinia'

// 创建vue实例 const app=createApp(App)

// 创建 Pinia 实例 const pinia = createPinia()

// 注册挂载到vue实列 app.use(router).use(pinia).mount('#app')

```

``` // store/index.ts

import { defineStore } from 'pinia' // 1. 定义容器、导出容器 // 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器 // 参数2：一些选项对象，也就是state、getter和action // 返回值：一个函数，调用即可得到容器实例

export const useMainStore = defineStore('main',{ // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求 // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导 state:()=>{ return { info:"hello,东东吖，我是Pinia" } }, getters:{}, actions:{} }) //组件内使用

```

② state 中数据的解构访问 ``` // store/index.ts import { defineStore } from 'pinia' // 1. 定义容器、导出容器 // 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器 // 参数2：一些选项对象，也就是state、getter和action // 返回值：一个函数，调用即可得到容器实例

③ **state 中数据的修改方式（actions和组件中）** // 一般的修改

//通过actions修改 // store/index.ts

// store/index.ts // 类似于vue2组件的methods，用于封装业务逻辑，修改state // // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this actions:{ changeState (){ this.count += 10 this.info = "actions修改数据" }, changeStates (num:number){ this.count += num + 2 this.info = "actions修改数据" } }

})

//组件内使用

```

③ getters 的使用 ``` // store/index.ts import { defineStore } from 'pinia' // 1. 定义容器、导出容器 // 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器 // 参数2：一些选项对象，也就是state、getter和action // 返回值：一个函数，调用即可得到容器实例

// 类似于组件的computed，用来封装计算属性，具有缓存的功能
getters:{
    // 函数接收一个可选参数：state状态对象
   count10(state){
       return state.count += 10
   },
   count20(state){
       return this.count += 20
   },
   // 若使用this.count，则必须指明返回数据的类型
   count11():number{
       return this.count += 11
   }

})

```

``` //组件内使用

```

vue进阶之路：vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结

前言：

创建项目：

一.组件结构

二.data

三.method

四.computed

五.父传子

六.子传父

七.原型链绑定和组件使用

八.任意组件通信mitt.js

九.双向绑定v-model

十.nextTick

十一.插槽

我是具名插槽1

我是具名插槽2

我是具名插槽3

十二.路由useRoute和useRouter

十三.路由守卫

十四.生命周期

十五.store