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

Question

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

Answer 1

用计算属性，返回值是这个列表值相加

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

监听用 watch选项

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

对象要深复制，默认是浅复制

Answer 2

<pre t="code" l="js">new Vue({
data: {
name: 'sigma'
},
watch:{
name: function( val ){
console.log( 'name has been changed:', val );
}
}
})

Answer 3

如果data里有个变量，watch里只要有名字一样的变量，就可以观测到变量变化。比如这个例子里的“a”,"b","c".  一般使用“a”这种就可以，val是变化了的值，oldVal是改变前的值。

如果为了发现对象内部值的变化，可以在选项参数中指定 deep: true ，就是例子里“c”这种

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var vm = new Vue({     data: {         a: 1,         b: 2,         c: 3     },     watch: {         a: function (val, oldVal) {             console.log('new: %s, old: %s', val, oldVal)         },         // 方法名         b: 'someMethod',         // 深度 watcher         c: {             handler: function (val, oldVal) { /* ... */ },             deep: true         }     } }) vm.a = 2 // -> new: 2, old: 1