公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

小tips,注意vue深度监听对象新老值如何保持不一样

2475次浏览

前言

假如你用vue监听复杂对象的时候,新旧值通常是一样的,vue官方也给出了解释:

注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

那么,问题来了,如何让vue深度监听对象新老值如何保持不一样?

Vue官方也给出了方案:

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代

解决方案

对的,很简单,官方提供的方案就是,对于复杂的表达式,用一个函数取代。

那么我们之间把复杂表达式或者对象,用computed属性包装一下,再来监听computed属性,不就可以了嘛!

之前的做法:

data:{
    haoroomsObj:{
        haoroomstestinner:{
            a: '我是haorooms资源库',
            b: '我是haorooms博客'
        }
    }
},
watch: {
  haoroomsObj: {
    handler: (val, olVal) => {
      console.log('我变化了', val, olVal)
    },
    deep: true
  }
},

此时,对象变化可以监听到,但是val,和oldVal是一样的。

函数包装后监听

data:{
    haoroomsObj:{
        haoroomstestinner:{
            a: '我是haorooms资源库',
            b: '我是haorooms博客'
        }
    }
},
computed: {
  newHaorooms() {
    return this.haoroomsObj
  }
watch: {
  newHaorooms: {
    handler: (val, olVal) => {
      console.log('我变化了', val, olVal)
    },
    deep: true
  }
},

此时监听打印的值就不一样了。

本文主要介绍这个小tips~ 最近忙于各种事情,后面有时间多总结一些干货出来,敬请期待!

Tags: vuewatchvalue

相关文章:

  1. repostone
    1
    非技术的路过。https://repostone.home.blog/
  2. hello
    2
    测试评论