Vue中使用this访问监听变量与回调参数有何差异？

常规情况：二者基本相等 #

在绝大多数场景下，this.myVar和watch回调里的value参数是完全等价的，this.myVar === value会返回true——就像你示例代码里打印的结果一样，二者指向同一个值。

为什么提供value参数？ #

主要是为了便捷性和可读性：

• 便捷性：不用重复写this.，尤其是变量名较长时，代码更简洁
• 可读性：一眼就能明确这是当前监听变量的新值，和this上的其他属性做区分，逻辑更清晰

特殊场景：二者可能不等 #

只有一种典型场景会导致二者出现差异：在watch回调内部同步修改this.myVar。

比如下面的代码：

watch: {
  myVar(value) {
    // 在回调里直接修改被监听的变量
    this.myVar = value + 1;
    // 此时this.myVar是修改后的值，而value还是触发watch的原始新值
    console.log(this.myVar, value); // 假设触发时value为5，会打印6和5
  }
}

这种情况下，value会保留触发watch的那个原始新值，而this.myVar已经被你改成了新的结果，二者自然不等。

总结 #

• 日常开发中，选this.myVar还是value全看个人习惯，不影响逻辑
• 但如果需要在回调里修改被监听变量，或者要保留触发watch的原始新值，必须用value参数，否则会拿到修改后的结果，导致逻辑出错

内容的提问来源于stack exchange，提问作者ᴓᴓᴓ