深入理解Vue.js中$watch的oldValue与newValue行为差异

$watch中oldValue与newValue的基本概念

$watch中的oldvalue和newValue

在Vue.js中，开发者可以使用$watch方法监听数据对象的变化。当数据发生变化时，回调函数会接收两个参数：oldValue和newValue，分别代表变化前后的值。

从名称上可以直观理解，这两个参数分别对应对象在变化发生前和发生后的具体数值。

然而，在实际开发过程中，笔者发现这两个参数的表现并不总是符合预期。下文将结合具体测试案例进行详细解析。

Vue $watch行为测试与案例分析

首先定义data中的初始值

data: {
 arr: [{
  name: '笨笨',
  address: '上海'
 }, {
  name: '笨笨熊',
  address: '北京'
 }],
 obj: {
  name: '呆呆',
  address: '苏州'
 },
 str: '哈哈哈'
 }

接着配置watch监听器

watch: {
 arr: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 obj: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 str: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 }

定义触发变化的事件方法

methods: {
 test() {
  this.arr.push({
  name: 9
  })
  this.$set(this.obj, 'i', 0)
  this.str = ''
 },
 test1() {
  this.arr = [{
  name: '000'
  }]
  this.obj = {
  name: 999
  }
  this.str = '123'
 }
 }

测试结果分析如下

1. 当对数组执行push操作，或对对象使用$set方法添加属性时，虽然这些操作会触发watch回调，但返回的oldValue和newValue在引用上是相同的。相比之下，字符串对象的修改则能如预期般返回不同的oldValue和newValue。
2. 若对数组和对象直接进行整体赋值操作，watch会被正确触发，且oldValue和newValue能够如预期地展示变化前后的不同值。

无法触发深层监听的常见操作

关于watch的其他测试场景

以下操作无法触发深层监听

1、数组相关操作

仅修改数组中某个下标对应的对象属性值

使用原生delete关键字删除数组中的某个属性

对数组的某个下标直接新增属性（未使用$set方法）

对数组的某个下标直接重新赋值

2、对象相关操作

修改对象中某个属性的值（注意：这会触发该属性自身的监听，但可能不触发对象层面的深层监听）

直接新增一个属性（未使用$set方法）

使用原生delete删除对象中的某个属性

以上总结可能存在不足

实现watch监听的通用解决方案

实现watch监听的通用方案

在修改完数据后，可以添加以下代码片段以强制触发更新

针对数组的处理

arr = [...arr]

针对对象的处理

obj = {...obj}

总结

以上就是本文的全部内容，希望这些关于Vue.js中$watch行为的解析能对大家的编程学习或工作有所帮助。如有任何疑问，欢迎留言交流，感谢支持。