vue.js - vue.js $watch数组对象


mounted: function() {


 this.$watch('things', function(){console.log('a thing changed')}, true);


}



things是对象的数组[{foo:1}, {foo:2}]

$ watch会检测添加或删除对象的时间,但不会检测对象上的值是否被更改。我怎样才能做到?

时间:

你应该为options传递一个对象而不是布尔值,因此:


mounted: function () {


 this.$watch('things', function () {


 console.log('a thing changed')


 }, {deep:true})


}



或者,你可以像这样将watcher设置为vue实例:


new Vue({


 ...


 watch: {


 things: {


 handler: function (val, oldVal) {


 console.log('a thing changed')


 },


 deep: true


 }


 },


 ...


})



[demo]

如果需要获取数组中已更改的项目,请查看:

jsfiddle Example

帖子示例代码:


new Vue({


 ...


 watch: {


 things: {


 handler: function (val, oldVal) {


 var vm = this;


 val.filter( function( p, idx ) {


 return Object.keys(p).some( function( prop ) {


 var diff = p[prop] !== vm.clonethings[idx][prop];


 if(diff) {


 p.changed = true; 


 }


 })


 });


 },


 deep: true


 }


 },


 ...


})



有一种更简单的方法,监控数组的项目而无需deep-watch:使用计算值


{


 el:"#app",


 data () {


 return {


 list: [{a: 0}],


 calls: 0,


 changes: 0,


 }


 },


 computed: {


 copy () { return this.list.slice() },


 },


 watch: {


 copy (a, b) {


 this.calls ++


 if (a.length !== b.length) return this.onChange()


 for (let i=0; i<a.length; i++) {


 if (a[i] !== b[i]) return this.onChange()


 }


 }


 },


 methods: {


 onChange () {


 console.log('change')


 this.changes ++


 },


 addItem () { this.list.push({a: 0}) },


 incrItem (i) { this.list[i].a ++ },


 removeItem(i) { this.list.splice(i, 1) }


 }


}



https://jsfiddle.net/aurelienlt89/x2kca57e/15/

...