2020-09-13 浅谈: Vue watch监听deep、immediate属性

如题所述

第1个回答  2022-06-28

Vue watch 用于监测数据变化,可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如 下,如有疏漏,烦请指正。

watch监听只有在数据变化时才会执行监听函数。父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,此时也需要执行watch监听函数。则需设置immediate:true.

需要监听复杂数据(对象)内部属性的变化时,设置deep属性。Vue会递归的侦听数据和属性的变化(性能消耗较大)。也就是给所有数据和属性添加handler执行函数。

监听notes对象,未添加deep:

执行效果

监听notes对象,,添加deep属性:

性能优化
鉴于deep属性Vue性能消耗较大,对于要监听数据中某个属性的响应时,可以只给对应属性添加deep。如下示例,只需侦听属性b的响应变化。

相似回答
大家正在搜