Vue watch 监听对象中的属性

Vue 提供了一个 watch 方法让使用者监听 data 内的数据变动，触发相应的方法

queryData: {
    name: '',
    creator: '',
    selectedStatus: '',
    time: [],
},

注： 下面 watch 后的函数上都可以拿到 新值和老值  

function(val, oldVal){ /*do something*/} 

现在需要监听这个 queryData，我们可以这样做：

watch: {
     queryData: {
         handler: function() {
            //do something
         },
         deep: true
     }
}

里面的 deep 设为了 true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想监听这个对象中的某个属性，比如name，这个时候可以这样

watch: {
     'queryData.name': {
         handler: function() {
            //do something
         },
     }
}

也可以这样写

watch: {
     'queryData.name':  function() {
            //do something
      },
}

或者通过巧用 computed 计算属性

computed: {
    getName: function() {
        return this.queryData.name
    }
}
watch: {
     getName: {
         handler: function() {
            //do something
         },
     }
     // getName: function() {
            //do something
     // },
}

 

 

 

https://blog.csdn.net/u014298440/article/details/82942680