vue里watch监听与深度监听的区别
时间: 2023-10-31 17:49:02 浏览: 62
Vue中watch可以监听指定的数据变化,当数据发生变化时,会自动执行回调函数。深度监听是指在监听对象或数组类型的数据变化时,会递归监听其内部所有属性或元素的变化。具体区别如下:
1. 监听普通数据类型:watch默认只监听一层数据变化,而深度监听则可以监听到嵌套在该数据内部的所有数据变化。
2. 监听对象类型数据:watch监听对象类型数据时,只会监听该对象的引用是否发生变化,而不会监听该对象内部属性的变化。深度监听则可以递归监听该对象内部所有属性的变化。
3. 监听数组类型数据:watch监听数组类型数据时,只会监听数组的引用是否发生变化,而不会监听数组元素的变化。深度监听则可以递归监听数组内部所有元素的变化。
总之,深度监听可以监听到更细粒度的数据变化,但也会带来一定的性能消耗。在使用时需要根据实际情况进行选择。
相关问题
vue watch深度监听
Vue的watch选项可以用于监听组件实例中的数据变化,当数据发生改变时,会自动调用相应的回调函数。默认情况下,watch会对数据进行浅层比较,即只比较数据的引用是否相同,而不会比较数据对象内部的属性是否相同。这就意味着如果数据对象内部的属性发生改变,watch将无法检测到这个改变。
为了解决这个问题,Vue提供了一个深度监听选项deep,将其设置为true可以使watch对数据对象内部的属性进行深层比较。例如:
```
watch: {
obj: {
handler: function (newVal, oldVal) {
console.log('obj changed')
},
deep: true
}
}
```
上面的代码将会对obj对象进行深层比较,当obj内部的属性发生改变时,会触发watch的回调函数。
需要注意的是,深度监听会影响性能,因为它需要递归遍历整个数据对象。因此,应该尽量避免在大型数据对象上使用深度监听。
vue3 watch深度监听
在Vue3中,watch默认情况下只会监听对象的第一层属性,如果需要深度监听,可以通过设置`deep`选项为`true`来实现。具体实现方法如下所示:
```javascript
import { watch } from 'vue'
watch(
// 监听的对象
() => state.obj,
// 监听到变化后的回调函数
(newVal, oldVal) => {
console.log('newVal:', newVal)
console.log('oldVal:', oldVal)
},
// 配置项
{
deep: true // 开启深度监听
}
)
```
需要注意的是,当监听的对象为`Proxy`对象时,`oldValue`值将会出现异常,此时与`newValue`相同。如果需要监听`Proxy`对象的某个属性,可以通过在监听对象的回调函数中获取该属性的值来实现。另外,在Vue3中,强制开启了深度监听,无法关闭。