Vue: watch5种监听情况
目录
一.watch的性质与作用
1.watch 的性质包括:
2.watch 常用于以下场景:
二.监视`ref`定义的基本类型数据
三.监视`ref`定义的对象类型数据
四.监视`reactive`定义的对象类型数据
五.监视`ref`或`reactive`定义的对象类型数据中的某个属性
六.监视上述的多个数据
一.watch的性质与作用
在 Vue 中,watch
的主要作用是监听数据的变化,并在数据变化时执行相应的回调函数,从而实现对数据变化的响应和处理。
1.watch
的性质包括:
- 可以监听 Vue 实例中的数据属性、计算属性、方法的返回值等。
- 能够获取数据变化前后的值,即新值和旧值,以便在回调函数中进行处理和比较。
- 支持深度监听,即可以监听对象内部属性的变化。
- 可以设置立即执行选项,在组件创建时立即执行一次回调函数。
2.watch
常用于以下场景:
- 当数据变化时执行异步操作,比如发送网络请求获取新的数据。
- 进行复杂的数据处理和逻辑判断。
- 同步更新其他相关的数据或状态。
二.监视`ref`定义的基本类型数据
直接写数据名即可,监视的是其`value`值的改变。
三.监视`ref`定义的对象类型数据
直接写数据名,监视的是对象的地址值,若想监视对象内部的数据,要手动开启深度监视。
1.若修改的是`ref`定义的对象中的属性,`newValue` 和 `oldValue` 都是新值,因为它们是同一个对象。
2.若修改整个`ref`定义的对象,`newValue` 是新值, `oldValue` 是旧值,因为不是同一个对象了。
四.监视`reactive`定义的对象类型数据
五.监视`ref`或`reactive`定义的对象类型数据中的某个属性
1. 若该属性值不是对象类型,需要写成函数形式。
2. 若该属性值是依然是对象类型,可直接编,也可写成函数,建议写成函数。
结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。