Vue学习计划-Vue3--核心语法（三）computed计算属性、watch监听、watchEffect函数

1. computed计算属性

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

2. watch监视与watchEffect

1. watch

• 作用：监视数据的变化（和Vue2的watch作用一致）
• 特点：Vue3中的watch只能监视以下4种数据：

1. ref定义的数据
2. reactive定义的数据
3. 函数返回一个值（getter函数）
4. 一个包含上述内容的数组

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

1. 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变

2. 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视

注意：

• 若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象
• 若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了

3. 情况三

监视reactive定义的【对象类型】数据, 默认开启深度监视

4. 情况四

监视ref或reactive定义的【对象类型】数据的某个属性, 注意如下：

1. 若该属性值不是【对象类型】，需写成函数形式
2. 若该属性值是【对象类型】，可直接编写，也可以写成函数，建议写成函数

结论：监视的要是对象里的属性，那么最后写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视

5. 情况五

监视上述的多个数据

// watch([()=>person.name, ()=>person.car], (nv)=>{
//   console.log('车变了', nv)
// },{ deep: true})
// 或者
watch([()=>person.name, person.car], (nv)=>{
  console.log('车变了', nv)
},{ deep: true})

2. watchEffect

• 官网：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更改时重新执行该函数
• watch对比watchEffect

1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2. watch：要明确指出监视的数据
3. watchEffect: 不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

• 示例代码：