vuejs怎么watch对象里某个属性的变化

Posted 2023-04-26

参考技术A 用计算属性，返回值是这个列表值相加

computed: countTotal: function () let total = 0; this.items.forEach(function (item) total += item.count ) return total

监听用 watch选项

watch: items: handler: function () , deep: true

对象要深复制，默认是浅复制 参考技术B 跟阴天应该木有半毛钱关系，貌似是农历月底惹的祸，再过两天应该就出现新月牙了

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的响应变化。