watch深度监听数组_VUE使用WATCH监听数组或对象的总结

一、监听数组

1.watch能监听到数组的push的改变,例如

data () {

return {

demo: [1,2]

}

},

mounted (){

window.myVue = this

},

watch: {

demo(val){

console.log(val)

}

},

myVue.demo.push(3) //[1,2,3]

2.watch 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：myVue.demo[1] = 5

当你修改数组的长度时，例如：myVue.demo.length = 2

这时候你可以删除原有键，再 $set 一个新的，这样就可以触发watch

myVue.$set(myVue.demo,0,8) // [8,2,3]

3.更复杂一点，你想对数组嵌套对象进行监听的时候，这时就需要深度监听

data () {

return {

demo:[

{

name:'张三',

age:18

},

{

name:'李四',

age:20

}

]

}

},

mounted (){

window.myVue = this

},

watch: {

demo: {

handler (val) {

console.log(val)

},

// 这里是关键，代表递归监听 demo 的变化

deep: true

}

},

myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]

二、监听对象

1.可以类似上面数组的第3点

2.可以直接监听对象中的值

data () {

return {

demo:{

name: '张三',

child: {

name: '李四',

age: 20

}

}

}

},

mounted (){

window.myVue = this

},

watch: {

'demo.child': {

handler: function (val) {

console.log(val)

},

deep: true

},

// 或者

'demo.name' (val) {

console.log(val)

}

},

myVue.demo.name = '王二' //王二

myVue.demo.age = '80' //{name:'李四',age:80}