vue 监听对象属性的变化

在修改(不是替换)对象或数组时,旧值将与新值相同,因为它们索引同一个对象/数组。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
         }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,233评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • 前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。...
    王钰峰阅读 4,405评论 1 22
  • 就在昨天,老妈和我微信视频,说:听说你买了一辆车。可不是吗?我终于买了一辆自行车。哈哈哈哈,两人不约大笑。 我买了...
    木木木侠阅读 978评论 0 4
  • 金灿灿的玉米囤满农家的庭院 红通通的小枣晾晒在屋前院后 黑黝黝的豆儿装好袋子聚在屋檐下 丰收!今年的秋,农家院落显...
    丰盈仓廪阅读 855评论 0 0