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

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

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

vue进阶之路：组件通信的8种方式，你搞清楚了吗？

vue进阶之路：父子组件的生命周期执行流程是怎么样的呢？

vue进阶之路：vuex五大核心概念，看完这篇文章就够了。

vue进阶之路：前端技术日新月异，vue3.0的时代已经来临...

vue进阶之路：叮，Vue2与Vue3都有哪些区别？请查收！

前言：

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
// 返回值：一个函数，调用即可得到容器实例

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

//组件内使用

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

// 一般的修改

//通过actions修改
// 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",
            count:10
        }
    },
    getters:{},
    
// 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
// 返回值：一个函数，调用即可得到容器实例

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

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

})

//组件内使用

本文参考文章：Vue3.2 setup语法糖、Composition API、状态库Pinia归纳总结

作者：东东吖
链接：https://juejin.cn/post/7079723441674256415
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。