1. computed 函数
定义计算属性：
- computed 函数，是用来定义计算属性的，计算属性不能修改。
-
计算属性应该是只读的，特殊情况可以配置 get set
-
核心步骤：
-
导入 computed 函数
-
执行函数 在回调参数中 return 基于响应式数据做计算的值 ，用 变量接收
-
1.1 基本使用：
1.2 高级用法（set和get方法）
总结：计算属性两种用法
- 给 computed 传入函数，返回值就是计算属性的值
- 给 computed 传入对象，get 获取计算属性的值，set 侦听设置计算属性改变。
- get 获取值需要返回一个值，set 设置值需要接收设置的值。
2. watch函数
watch函数，是用来定义侦听器的
- 作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
-
watch函数的第一个参数 响应式对象
-
俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）
基础使用：
- 导入watch函数
- 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
2.1 侦听单个数据
- 侦听ref定义的响应式数据
2.2 deep 深度侦听
- 侦听 reactive 定义的响应式数据（复杂数据类型），deep 深度侦听
-
默认机制：通过 watch 监听的 ref 对象默认是 浅层侦听的，直接修改嵌套的对象属性不会触发回调执行 ，需要开启 deep 选项
deep 深度侦听，默认 watch 进行的是浅层侦听，不加 deep: true 侦听不到。
原因：
因为 watch 侦听的是 user 这个对象，对 user 内部的 name 属性值进行更改后，不会导致整个 user 的地址发生改变。所以侦听不到，只有把这个对象的地址完全改变才能侦听到。
2.3 侦听多个数据的变化
- 同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调
2.4 立即侦听
- 在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调
2.5 精确侦听对象的某个属性
- 在不开启 deep 的前提下，侦听属性 name 值的变化，只有 name 变化时才执行回调
- 可以把第一个参数写成函数的写法，返回要监听的具体属性
3. ref属性
获取 DOM 或者组件实例可以使用 ref 属性，写法和 vue2.0 需要区分开
- vue2.0 获取单个 DOM 或者组件
- vue3.0 获取单个 DOM 或者组件
- 获取 v-for 遍历的 DOM 或者组件
4. 组件通信
4.1 父传子与子传父
- 父组件
- 子组件
总结：
- 父传子：在 setup 中使用 props 数据
setup(props){ // props就是父组件数据 } - 子传父：触发自定义事件的时候emit来自
setup(props,{emit}){ // emit 就是触发事件函数 }
4.2 依赖注入（provide与inject）
使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。
- 根组件：
- 子组件
- 孙子组件
总结：
- provide函数提供数据和函数给后代组件使用
- inject函数给当前组件注入provide提供的数据和函数
5. mixins语法
官方话术：
- 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
5.1 全局混入：所有组件混入了这些逻辑代码
- vue 2.0 写法
// 全局混入 全局mixin
// vue2.0 写法 Vue.mixin({})
app.mixin({
methods: {
say () {
console.log(this.$el,'在mounted中调用say函数')
}
},
mounted () {
this.say()
}
})- vue 3.0 写法
5.2 局部混入：通过mixins选项进行混入
假设两个组件内部需要使用相同的代码逻辑，可以先建一个js文件，封装重复的代码，并且导出该对象。
使用配置对象 mixins，以数组的形式接收导出的对象，模版直接使用导出对象里的方法。
