解决Vue 使用Watch侦听器监听对象如何取得旧值问题

最新推荐文章于 2024-01-06 23:02:09 发布

peterCZG

最新推荐文章于 2024-01-06 23:02:09 发布

阅读量5k

点赞数 6

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/qq_41777791/article/details/108213187

版权

解决Vue 使用Watch侦听器监听对象如何取得旧值问题

Created by @一个前端er 2020/08/25

最近在项目中因为需要深度监听数组对象的变化，其实是一组表格数据，数组中的每一项都是一个对象，或者说都是一行数据，监听它的改变就必须使用Watch侦听器来完成了，并且由于对象（数组）不止一层引用，需要在Watch中开始深度监听deep:true，基本语法如下：

watch:{
   
  someVal:{
   
  handler(newVal,oldVal){
   
  //处理逻辑
  console.log(newVal.oldVal)
  },
   deep:true
 }
}

当数据改变之，确实是执行了handler里面的代码，但是在控制台查看新值和老值，发现它们两都是改变之后的数据，这就让我有点纳闷了，以为是哪里出现问题了，然后我就判断了它们两是不是同一个对象：

console.log(newVal === oldVal) //true

结果返回的是true，果然它们两指向的是同一个引用，这说明 Watch 只是侦听到它改变了，并没有把之前的老值给缓存下来，引用类型直接指向了引用地址。后来在网上搜了一下解决方案，基本都是类似的：使用Computed计算属性缓存深拷贝后的 data 或 props 里面的数据，然后再使用watch进行侦听，这样前前后后指向的是不同的两个对象，从而获得改变之前的旧数:

computed:{
   
 cacheSomeVal(){
   
 return deepClone(this.someVal) //JSON.parse(JSON.stringify(this.someVal)
 }
},
watch:{
   
  cacheSomeVal:{
   
  handler(newVal,oldVal){
   
  //处理逻辑
  console.log(newVal.oldVal)
  },
   deep:true