Vue3 setup语法糖、Composition API全方位解读
admin
2024-01-29 19:56:06
0次
- 起初 Vue3.0 暴露变量必须
return出来，template中才能使用； - Vue3.2 中 只需要在
script标签上加上setup属性，组件在编译的过程中代码运行的上下文是在setup()函数中，无需return，template可直接使用。 - 本文章以Vue2的角度学习Vue3的语法，让你快速理解Vue3的Composition Api
- 本文章第十四节为状态库
Pinia的安装、使用讲解
一、文件结构
Vue2中， 标签中只能有一个根元素，在Vue3中没有此限制
// ...
二、data
三、method
// 调用方法
四、computed
五、watch
六、props父传子
子组件
{{props.name}}// 可省略【props.】{{name}}
父组件
引入子组件，组件会自动注册
七、emit子传父
子组件
{{props.name}}// 可省略【props.】{{name}}
父组件
八、v-model
支持绑定多个v-model，v-model 是 v-model:modelValue 的简写
绑定其他字段，如：v-model:name
参考vue实战视频讲解：进入学习
个人博客推荐：白煮蛋的博客
子组件
我叫{{ modelValue }}，今年{{ age }}岁
父组件
// v-model:modelValue简写为v-model// 可绑定多个v-model九、nextTick
十、ref子组件实例和defineExpose
- 在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
- 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。
子组件
{{state.name}}
父组件
1. 获取一个子组件实例
2. 获取多个子组件实例：在 v-for 中获取子组件实例
这种情况仅适用于 v-for 循环数是固定的情况 ，因为如果 v-for 循环数 在初始化之后发生改变，那么就会导致 childRefs 再一次重复添加，childRefs 中会出现重复的子组件实例
3. 获取多个子组件实例：动态 v-for 获取子组件实例
通过下标来向 childRefs 添加/修改，初始化之后，动态修改 v-for 循环数，会自动根据下标重新修改该下标对应的数据
// 通过下标向 childRefs 动态添加子组件实例 childRefs[i] = el'/>
十、插槽slot
子组件
// 匿名插槽父组件
// 匿名插槽 我是默认插槽// 具名插槽 我是具名插槽
我是具名插槽
我是具名插槽
// 作用域插槽
十二、路由useRoute和useRouter
十三、路由导航守卫
十四、store
Vuex
*Vue3 中的Vuex不再提供辅助函数写法
Pinia
*全面拥抱 Pinia 吧！
2021年11月24日，尤大在 Twitter 上宣布：Pinia 正式成为 Vue 官方的状态库，意味着 Pinia 就是 Vuex 5 ，Pinia 的优点：
- 同时支持 Composition Api 和 Options api 的语法；
- 去掉 mutations ，只有 state 、getters 和 actions ；
- 不支持嵌套的模块，通过组合 store 来代替；
- 更完善的 Typescript 支持；
- 清晰、显式的代码拆分；
安装
# 使用 npm
npm install pinia# 使用 yarn
yarn add pinia
main.js 引入
import App from './App.vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'const app = createApp(App)
app.use(createPinia())
app.mount('#app')
配置 store.js
import { defineStore } from 'pinia'// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const useStore = defineStore({// id: 必须，在所有 Store 中唯一id: 'globalState',// state: 返回对象的函数state: () => ({count: 1,data: {name: 'Jerry',sex: '男'}}),// getter 第一个参数是 state，是当前的状态，也可以使用 this 获取状态// getter 中也可以访问其他的 getter，或者是其他的 Storegetters: {// 通过 state 获取状态doubleCount: (state) => state.count * 2,// 通过 this 获取状态（注意this指向）tripleCount() {return this.count * 3}},actions: {updateData (newData, count) {// 使用 this 直接修改this.data = { ...newData }this.count = count// 使用 $patch 修改多个值this.$patch({data: { ...newData },count})}}
})
使用 store
// 获取 store 的 state姓名：{{store.data.name}}
性别：{{store.data.sex}}
// 调用 actions 方法 / 修改 store// 获取 getter获取getter：{{store.doubleCount}}
其他方法
替换整个 state$state 可以让你通过将 store 的属性设置为新对象来替换 store 的整个 state
const store = useStore()
store.$state = {name: 'Bob',sex: '男'
}
重置状态
调用 store 上的 $reset() 方法将状态重置为初始值
const store = useStore()
store.$reset()
十五、生命周期
通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
下表包含如何在 Option API 和 setup() 内部调用生命周期钩子
| Option API | setup中 |
|---|---|
| beforeCreate | 不需要 |
| created | 不需要 |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
| errorCaptured | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activated | onActivated |
| deactivated | onDeactivated |
十六、原型绑定与组件内使用
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)// 获取原型
const prototype = app.config.globalProperties// 绑定参数
prototype.name = 'Jerry'
组件内使用
十七、v-bind() CSS变量注入
Jerry
十八、provide和inject
父组件
子组件
十九、自定义指令
Vue3相较于Vue2的自定义声明方法有些不同
const app = createApp({})// 使 v-demo 在所有组件中都可用
app.directive('demo', {// 在绑定元素的 attribute 前或事件监听器应用前调用created(el, binding, vnode, prevVnode) {},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
})
比如实现一个默认密文身份证号，点击才展示的指令
app.directive('ciphertext', {created: (el: any) => {console.log(el, 1111)el.style.cursor = 'pointer'const value = el.innerTextif (!value || value === 'null' || value === '--') {el.innerText = '--'} else {el.setAttribute('title', '点击查看')el.innerText = hideText(value)el.addEventListener('click', () => {if (el.innerText.indexOf('*') > -1) {el.innerText = value} else {el.innerText = hideText(value)}})}}
}){{idNumber}}
二十、对 await 的支持
不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup 。
二十一、定义组件的name
用单独的
好了， 以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！
相关内容
热门资讯
【MySQL】锁
锁 文章目录锁全局锁表级锁表锁元数据锁（MDL）意向锁AUTO-INC锁...
【内网安全】 隧道搭建穿透上线...
文章目录内网穿透-Ngrok-入门-上线1、服务端配置：2、客户端连接服务端ÿ...
GCN的几种模型复现笔记
引言 本篇笔记紧接上文，主要是上一篇看写了快2w字，再去接入代码感觉有点...
数据分页展示逻辑
import java.util.Arrays;import java.util.List;impo...
Redis为什么选择单线程？R...
目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程？三、R...
【已解决】ERROR: Cou...
正确指令： pip install pyyaml
关于测试，我发现了哪些新大陆
关于测试 平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...
Lock 接口解读
前置知识点Synchronized synchronized 是 Java 中的关键字，...
Win7 专业版安装中文包、汉...
参考资料：http://www.metsky.com/archives/350.htm...
3 ROS1通讯编程提高(1)
3 ROS1通讯编程提高3.1 使用VS Code编译ROS13.1.1 VS Code的安装和配置...
大模型未来趋势
大模型是人工智能领域的重要发展趋势之一，未来有着广阔的应用前景和发展空间。以下是大模型未来的趋势和展...
python实战应用讲解-【n...
目录 如何在Python中计算残余的平方和 方法1：使用其Base公式 方法2：使用statsmod...
学习u-boot 需要了解的m...
一、常用函数 1. origin 函数 origin 函数的返回值就是变量来源。使用格式如下...
常用python爬虫库介绍与简...
通用 urllib -网络库(stdlib)。 requests -网络库。 grab – 网络库&...
药品批准文号查询|药融云-中国...
药品批文是国家食品药品监督管理局（NMPA）对药品的审评和批准的证明文件...
【2023-03-22】SRS...
【2023-03-22】SRS推流搭配FFmpeg实现目标检测 说明： 外侧测试使用SRS播放器测...
有限元三角形单元的等效节点力
文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数（Nÿ...
初级算法-哈希表
主要记录算法和数据结构学习笔记，新的一年更上一层楼！ 初级算法-哈希表...
进程间通信【Linux】
1. 进程间通信 1.1 什么是进程间通信 在 Linux 系统中，进程间通信...
【Docker】P3 Dock...
Docker数据卷、宿主机与挂载数据卷的概念及作用挂载宿主机配置数据卷挂载操作示例一个容器挂载多个目...