Vue中如何正确监听对象类型的计算属性？

你遇到的是Vue2版本的对象响应式限制问题：

• 你在data中初始化test1为空对象，没有预先声明asdf属性，直接通过test1.asdf = 'blah'的方式新增属性时，Vue2无法为动态新增的属性添加响应式劫持，所以哪怕你给watcher开了deep: true也无法捕获到变更。
• Vue DevTools能看到属性变化是因为它直接读取对象的内存值，和Vue的响应式劫持逻辑无关，所以会出现「DevTools显示变更但watcher不触发」的矛盾现象。
• 你的计算属性test直接返回this.test1的写法本身没有问题，问题出在源对象的属性更新方式不符合响应式要求。

你可以任选以下任意一种方式修复：

方案1：预先声明所有需要用到的属性 #

在data初始化时就把对象的所有属性提前声明好，Vue会为预先声明的属性自动添加响应式劫持：

data() {
  return {
    // 预先声明asdf属性，初始值可以设为空字符串/undefined/null
    test1: { asdf: '' },
  }
},

修改后原来的点击事件@click="test1.asdf = 'blah'"可以正常触发监听。

方案2：用$set方法新增动态属性 #

如果属性是业务需要动态新增的、无法提前声明，使用Vue提供的$setAPI来添加属性，该方法会自动为新增属性添加响应式劫持：
把你的按钮点击事件修改为：

<v-btn small dark @click="$set(test1, 'asdf', 'blah')">Test</v-btn>

不需要修改其他代码即可正常触发watcher回调。

方案3：升级到Vue3 #

Vue3使用Proxy实现响应式，没有Vue2的对象/数组新增属性的响应式限制，原有代码不需要修改即可正常运行。

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