Vue子组件(deep)深度监听props对象属性无效的解决办法

Posted 2023-05-04

参考技术A 父组件给子组件传递的props里面有一个值是一个对象，在子组件中通过watch监听该对象的变化，已经加上了 deep: true 的相关配置，但是还是无法监听到该值的改变。

通过阅读官方文档相关深入响应式原理（ https://cn.vuejs.org/v2/guide... ）中得知：受现代 javascript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

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

参考技术A

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

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

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

监听notes对象，未添加deep:

执行效果

监听notes对象，，添加deep属性：

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