## 学习前提：最初 Vue3.0 暴露出来变量是必须要 return 出来，才能在template 中使用。在Vue3.2 之后，只需要在script 标签加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup()函数中的。无需return , 在template 中可以直接使用。本文通过Vue 2.x 的角度展开对Vue3.2 语法的学习和了解。 ### 1. 实现data数据的修改 ```js ``` ### 2. method方法和computed计算方法的用法 ```js ``` ### 3.watch 监听方法 watch 的第三个参数： 1. deep: 深度监听 2. immediate: 作用就是设置是否立即执行监控，当值设置为 true 时，那么被监控的对象在初始化时就会触发一次 watch 方法。 ```js ``` ### 4.父组件传参给子组件 - props; 子组件传参给父组件 - emit 父组件： ```js ``` 子组件： ```js ``` ### 5.v-model 双向绑定 - 支持绑定多个`v-model`，`v-model` 是 `v-model:modelValue` 的简写 - 绑定其他字段，如：`v-model:name` 父组件： ```js ``` 子组件： ```js ``` ### 6.ref子组件实例和defineExpose - 在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成子组件： ```js ``` 1. 获取一个子组件的实例： ```js ``` 2.获取多个子组件实例：在v-for中获取子组件的实例 - 这种情况仅适用于 v-for `循环数是固定的情况`。如果 v-for `循环数` 在初始化之后发生改变，那么就会导致 childRefs 再一次重复添加，childRefs中会出现重复的子组件实例 ```js ``` 3.获取多个子组件实例：动态 v-for 获取子组件实例： ```js ``` ### 7.插槽 slot 在 Vue2 中, 一般中具名插槽和作用域插槽分别使用`slot`和`slot-scope`来实现，如下为vue2 插槽的使用例子： ```js // 父组件 ``` ```js // 子组件 ``` 在 Vue3 中`slot`和`slot-scope`进行了合并统一使用，使用 `v-slot`, `v-slot:slotName`简写成`#slotName` ```js // 父组件 ``` ```js // 子组件 ``` ### 8.原型绑定和组件内使用 main.js中配置： ```js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 获取原型 const prototype = app.config.globalProperties // 绑定参数 prototype.name = '小明' ``` 在组件中使用： ```js ``` ### 9. provide和inject 父组件： ```js ``` 子组件： ```js ``` ### 10.自定义指令 vue 3.0的自定义指令 ```js 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) {} }) ``` 自定义指令实现测试生命周期： ```js 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) {} });

测试生命周期

```

我是具名插槽

我是具名插槽

我是具名插槽