Vue: watch5种监听情况

目录

一.watch的性质与作用

1.watch 的性质包括：

2.watch 常用于以下场景：

二.监视`ref`定义的基本类型数据

三.监视`ref`定义的对象类型数据

四.监视`reactive`定义的对象类型数据

五.监视`ref`或`reactive`定义的对象类型数据中的某个属性

六.监视上述的多个数据

---

一.watch的性质与作用

在 Vue 中，watch 的主要作用是监听数据的变化，并在数据变化时执行相应的回调函数，从而实现对数据变化的响应和处理。

1.watch 的性质包括：

1. 可以监听 Vue 实例中的数据属性、计算属性、方法的返回值等。
2. 能够获取数据变化前后的值，即新值和旧值，以便在回调函数中进行处理和比较。
3. 支持深度监听，即可以监听对象内部属性的变化。
4. 可以设置立即执行选项，在组件创建时立即执行一次回调函数。

2.watch 常用于以下场景：

1. 当数据变化时执行异步操作，比如发送网络请求获取新的数据。
2. 进行复杂的数据处理和逻辑判断。
3. 同步更新其他相关的数据或状态。

二.监视`ref`定义的基本类型数据

直接写数据名即可，监视的是其`value`值的改变。

三.监视`ref`定义的对象类型数据

直接写数据名，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。
1.若修改的是`ref`定义的对象中的属性，`newValue` 和 `oldValue` 都是新值，因为它们是同一个对象。
2.若修改整个`ref`定义的对象，`newValue` 是新值， `oldValue` 是旧值，因为不是同一个对象了。

四.监视`reactive`定义的对象类型数据

五.监视`ref`或`reactive`定义的对象类型数据中的某个属性

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

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

六.监视上述的多个数据