在 Vue 中，如何判断对象前一个值是否相同，若相同则取第二个值？

Question

在 Vue 中，如何判断对象的前一个值是否相同，若相同则取第二个值？这是一个常见的响应式数据处理问题。由于 Vue 的响应式系统会追踪对象引用，直接比较对象时可能无法准确判断其内部值是否变化。那么，如何正确比较对象的值，并在值相同时取后续值？常见问题包括：使用 `watch` 监听对象时，如何获取前一个值和当前值？如何深比较两个对象是否“值相等”？在 `computed` 属性或 `watchEffect` 中，如何确保逻辑正确处理对象变更？本文将围绕这些问题，探讨在 Vue 中判断对象值是否相同并进行取值的实用方法。

Answer 1

在 Vue 中判断对象的前一个值是否相同，若相同则取第二个值的实践方法

在 Vue 的响应式系统中，对象的变更追踪是基于引用的。当对象的引用未变但其内部属性值发生变化时，Vue 会触发更新，但在监听器中，如 watch 或 watchEffect 中，如何准确获取前一个值并判断是否“值相等”，是一个常见的开发挑战。

1. Vue 响应式对象的变更机制简析

Vue 使用 Proxy 或 Object.defineProperty 来追踪对象的访问和修改。对于对象来说，Vue 默认只追踪引用变化。例如：

    const obj = reactive({ a: 1 });
    obj.a = 2; // 触发响应式更新
  

此时，虽然对象的引用没有变化，但由于其属性值改变，仍然会触发更新。

2. 使用 watch 监听对象的变化

在 Vue 中，watch 可以监听对象的变更，并提供前一个值和当前值作为参数：

    watch(
      () => obj,
      (newVal, oldVal) => {
        console.log('新值:', newVal);
        console.log('旧值:', oldVal);
      }
    );
  

但需要注意的是，newVal 和 oldVal 可能指向同一个引用，因此不能直接使用 === 进行比较。

3. 深比较两个对象是否“值相等”

为了判断对象的内容是否相同，我们需要进行深比较（deep equal）。可以使用以下方法：

• 使用 JSON.stringify：

    JSON.stringify(obj1) === JSON.stringify(obj2);
  

• 使用第三方库如 Lodash 的 _.isEqual：

    import _ from 'lodash';
    _.isEqual(obj1, obj2);
  

这两种方式都可以判断对象的“值是否相等”，适用于大多数业务场景。

4. 在 watchEffect 中处理对象变更

watchEffect 会自动追踪依赖，但在函数内部无法直接获取到旧值。如果需要比较旧值与新值，可以手动缓存旧值：

    let oldVal = null;
    watchEffect(() => {
      const newVal = obj;
      if (oldVal && _.isEqual(newVal, oldVal)) {
        console.log('对象值未变化');
      } else {
        console.log('对象值发生变化');
      }
      oldVal = newVal;
    });
  

这种方式可以实现对对象值变化的精确判断。

5. 在 computed 属性中处理对象变更

computed 属性默认是只读的，但它会缓存结果。如果依赖对象的某个属性发生变化，计算属性会重新执行。

如果需要在 computed 中返回对象的某个状态，并且需要比较前一个值，可以结合 ref 缓存前值：

    const obj = reactive({ a: 1 });
    const lastA = ref(obj.a);
    const computedValue = computed(() => {
      const currentA = obj.a;
      const result = currentA === lastA.value ? '相同' : '不同';
      lastA.value = currentA;
      return result;
    });
  

该方式可确保在每次对象属性变化时进行比较。

6. 使用自定义函数封装比较逻辑

为了提高复用性，可以将比较逻辑封装成一个可复用的函数或组合式函数：

    function useDeepCompare(obj) {
      const prev = ref(null);
      return computed(() => {
        const isEqual = _.isEqual(obj.value, prev.value);
        if (!isEqual) {
          prev.value = obj.value;
        }
        return { isEqual, value: obj.value };
      });
    }
  

这样可以在多个组件中复用对象值比较逻辑。

7. 常见问题总结与建议

问题	建议方案
如何在 watch 中获取前一个值？	watch 回调参数提供 oldVal
如何判断两个对象是否值相等？	使用 JSON.stringify 或 Lodash 的 isEqual
如何在 watchEffect 中比较对象？	手动缓存旧值进行比较
computed 中如何处理对象变更？	使用 ref 缓存上一次值进行比较

8. 总结性的建议流程图

graph TD
      A[开始] --> B{是否使用 watch 监听对象？}
      B -->|是| C[使用 newVal 和 oldVal 比较]
      B -->|否| D{是否在 watchEffect 中？}
      D -->|是| E[手动缓存 previous 值]
      D -->|否| F{是否在 computed 中？}
      F -->|是| G[使用 ref 缓存上一次值]
      F -->|否| H[其他场景，使用自定义封装函数]