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". &nbsp;一般使用“a”这种就可以，val是变化了的值，oldVal是改变前的值。如果为了发现对象内部值的变化，可以在选项参数中指定&nbsp;deep: true ，就是例子里“c”这种1234567891011121314151617181920var&nbsp;vm&nbsp;=&nbsp;new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a:&nbsp;1,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b:&nbsp;2,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c:&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;watch:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a:&nbsp;function&nbsp;(val,&nbsp;oldVal)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('new:&nbsp;%s,&nbsp;old:&nbsp;%s',&nbsp;val,&nbsp;oldVal)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;方法名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b:&nbsp;'someMethod',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;深度&nbsp;watcher&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:&nbsp;function&nbsp;(val,&nbsp;oldVal)&nbsp;{&nbsp;/*&nbsp;...&nbsp;*/&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deep:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}})vm.a&nbsp;=&nbsp;2&nbsp;//&nbsp;->&nbsp;new:&nbsp;2,&nbsp;old:&nbsp;1&nbsp;&nbsp;