vue进阶之路:vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
大家好,我叫东东吖,你现在看到的是vue进阶系列,如果觉得不错,可以点赞收藏哦,喜欢我的朋友,还可以加个关注鸭。
vue进阶系列包括以下内容:
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
];
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修改数据" } }
})
```
``` //组件内使用
```
- 东东吖带你打通全栈,go-vue-react项目介绍
- 【vue进阶之旅】如何自定义组件v-model,封装属于自己的组件库?
- 【vue进阶之旅】如何使用keep-alive做组件缓存?
- 发生跨域的时候,服务器到底有没有接收到请求?
- vue进阶之路:vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
- 跨域问题及前后端常见解决方案?
- 微信小程序如何分包?
- 前端性能优化,如何提高首屏加载速度?
- 项目中的配置文件都是干嘛的?
- 从0到1学习Node.js系列教程(第一篇):API接口初体验
- 父子组件的生命周期执行流程是怎么样的呢?
- 1024程序员这天,我发现了掘金官方的一个bug。
- 组件通信的8种方式,你搞清楚了吗?
- 手把手教你利用XSS攻击体验一次黑客