Vue使用watch监听一个对象中的属性

问题描述
Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如

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

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

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

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

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

或者如果想监测具体的属性变化，如 name 变化时，才执行handler函数，则可以利用计算属性computed做中间层。

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

扩展：

watch 和 computed 的区别

watch：监听到值的变化就会执⾏回调；无缓存性，页面重新渲染时值不变化也会执行

computed：计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会

返回内容（computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算）。

总结：一般来说需要依赖别的属性来动态获得值的使用可以使用 computed，对于监听到值的变化时做一些逻辑处理的情况，可以使用 watch。