vue 监听对象属性的变化

2017-11-15  本文已影响0人  Aklan

在修改(不是替换)对象或数组时,旧值将与新值相同,因为它们索引同一个对象/数组。Vue 不会保留修改之前值的副本。

导致问题:监听整个对象或数组时,handler得到的newVal和oldVal指向同一个对象或数组,导致新值和旧值相等
解决方法:在computed中拷贝(深拷贝)需要监听的对象或数组,在watch中监听拷贝后的对象或数组

data(){
       return{
             dialog: {
                add: false,
                    edit: false,
                    importFile: false
                },
       }
},
computed: {
       watchDialog: function(){
                let obj = {}
                Object.keys(this.dialog).forEach(key=>{
                    obj[key] = this.dialog[key]
                })
                return obj
      }
},
watch: {
       'watchDialog': {
                handler: function(newVal,oldVal){
                           //此处newVal跟oldVal的值是符合预期的新值和旧值
                    },
                   deep: true
         }
}
上一篇下一篇

猜你喜欢

热点阅读