Vue使⽤watch监听数组或对象的总结⼀、监听数组
  1.watch能监听到数组的push的改变，例如
data () {
return {
demo: [1,2]
}
},
　mounted (){
    Vue = this
　},
vue逗号分割的字符串转数组
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 (){
  Vue = 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 (){
  Vue = 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}有其他好的办法欢迎留⾔指正

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。