Vue 3.2+ setup语法糖、Composition API 总结

1.最初 Vue3.0 暴露出来变量是必须要 return 出来，才能在template 中使用；
2.Vue3.2 之后，只需要在script 标签加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup()函数中的。无需return , 在template 中可以直接使用。
3.通过Vue 2.x 的角度展开对Vue3.2 语法的了解。

1.语法结构

// …

复制代码
2.data数据的修改

复制代码
3.method方法的声明

<button @click=‘changeName’>按钮

复制代码
4.computed 计算方法

复制代码
5.watch 监听方法
watch 的第三个参数：

deep: 深度监听
immediate: 作用就是设置是否立即执行监控，当值设置为 true 时，那么被监控的对象在初始化时就会触发一次 watch 方法。

复制代码
6.父传子 props
父组件中引入子组件：

复制代码
子组件：

{{props.name}}
// 可省略【props.】
{{name}}

复制代码
7.子传父 emit
子组件：

{{props.name}}
// 可省略【props.】
{{name}}
<button @click=‘changeName’>更名

复制代码
父组件：

<child :name=‘state.name’ @updateName=‘updateName’ />

复制代码
8.v-model 双向绑定

支持绑定多个v-model，v-model 是 v-model:modelValue 的简写
绑定其他字段，如：v-model:name

子组件：

<span @click=“changeInfo”>我叫{{ modelValue }}，今年{{ age }}岁

复制代码
父组件：

// v-model:modelValue简写为v-model
// 可绑定多个v-model

复制代码
9.ref子组件实例和defineExpose

在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成

子组件：

{{state.name}}

复制代码

获取一个子组件的实例：

复制代码
2.获取多个子组件实例：在v-for中获取子组件的实例

这种情况仅适用于 v-for 循环数是固定的情况。如果 v-for 循环数 在初始化之后发生改变，那么就会导致 childRefs 再一次重复添加，childRefs中会出现重复的子组件实例

复制代码
3.获取多个子组件实例：动态 v-for 获取子组件实例：

<button @click=‘childNums++’>

// 通过下标向 childRefs 动态添加子组件实例

复制代码
10.插槽 slot
子组件：

// 匿名插槽

// 具名插槽

// 作用域插槽

复制代码
父组件：


// 匿名插槽
我是默认插槽

// 具名插槽
<template #title>
  <h1>我是具名插槽</h1>
  <h1>我是具名插槽</h1>
  <h1>我是具名插槽</h1>
</template>

// 作用域插槽
<template #footer="{ scope }">
  <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
</template>

复制代码
11.原型绑定和组件内使用
main.js中配置：
import { createApp } from ‘vue’
import App from ‘./App.vue’
const app = createApp(App)

// 获取原型
const prototype = app.config.globalProperties

// 绑定参数
prototype.name = ‘jack’
复制代码
在组件中使用：

复制代码
12. provide和inject
父组件：

复制代码
子组件：

复制代码
13.自定义指令
vue 3.0的自定义指令
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(‘testLifeCycle’, {
// 在绑定元素的attribute前或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
console.log(binding);
console.log(binding.modifiers);
if (Object.keys(binding.modifiers).length == 0) {
alert(‘说明没有传修饰符’);
return false;
}
alert(‘说明传了修饰符’)
},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
});

测试生命周期