vue3.0学习笔记（三）——计算属性、监听器、ref属性、组件通信

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，以数组的形式接收导出的对象，模版直接使用导出对象里的方法。