其他分享
首页 > 其他分享> > Vue使用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}


有其他好的办法欢迎留言指正

 

标签:Vue,name,val,demo,age,watch,myVue,监听
来源: https://www.cnblogs.com/zhujunislucky/p/12503403.html