在 Vue 中使用 watch 函数时,deep和immediate 参数的作用

在 Vue 中使用 watch 函数时
deep 参数用于控制是否深度观察对象的变化。

当 deep 参数为 true 时,watch 函数会递归观察对象的每个属性的变化,即使是嵌套在对象中的属性也会被观察到。这意味着当对象内部的属性发生变化时,也会触发 watch 回调函数。

示例:

watch(obj, () => { 
    console.log(obj.value.name); 
}, { deep: true, immediate: true });

在上面的代码中,当 obj 或其内部的任何属性发生变化时,都会触发 watch 回调函数,并输出 obj.value.name 的值。deep: true 保证了无论属性嵌套多深,都能观察到变化。

注意:由于深度观察对象的每个属性会增加性能开销,因此在使用 deep 参数时需要注意性能问题,并仔细考虑是否真正需要深度观察。

 

immediate 参数用于控制是否在初始创建 watch 时立即执行回调函数。

当 immediate 参数为 true 时,watch 在创建时会立即执行一次回调函数,即使被观察的值在初始化时没有发生变化。

在上述代码中,无论 obj 的初始值是什么,immediate: true 会使回调函数立即执行一次,输出 obj.value.name 的初始值。

这在某些情况下很有用,例如需要在组件初始加载时执行一些操作,或者需要立即处理被观察对象的初始状态。

猜你喜欢

转载自blog.csdn.net/weixin_39273589/article/details/131737659