Vue如何深度监听带有getter/setter且依赖其他对象的computed计算属性？

问题根因 #

监听失效通常来自两类场景：

• Vue2环境下，直接通过对象[新key] = 值的方式给对象新增不存在的属性时，该操作无法被Vue响应式系统捕获，连带依赖该属性的计算属性也不会触发更新
• 监听返回引用类型值的计算属性时，默认的浅层监听无法捕获引用内部的属性变化

操作步骤 #

1. 修复响应式赋值逻辑 #

首先修改计算属性的set方法，保证赋值操作可以触发响应式更新：

• Vue2 写法：

computed: { 
  someComputedProperty: {
    set (value) {
      // 用$set保证新增属性也能触发响应式
      this.$set(this.someComputedPropertyObject, this.someOtherObject.id, value);
    },
    get () {
      return this.someComputedPropertyObject[this.someOtherObject.id];
    }
  }
}

• Vue3 写法：
  如果someComputedPropertyObject是通过reactive定义的，直接赋值即可；如果是ref定义的对象，需要访问.value操作：

// reactive 定义场景
set (value) {
  this.someComputedPropertyObject[this.someOtherObject.id] = value
}
// ref 定义场景
set (value) {
  this.someComputedPropertyObject.value[this.someOtherObject.id] = value
}

2. 给watch配置开启深度监听 #

在监听对应计算属性的配置项中添加deep: true即可捕获变更：

• 选项式API写法：

watch: {
  someComputedProperty: {
    deep: true,
    handler (newVal, oldVal) {
      // 此处可获取变更后的最新值
      console.log('计算属性更新：', newVal)
    }
  }
}

• 组合式API写法：

import { watch } from 'vue'

watch(
  () => someComputedProperty.value,
  (newVal) => {
    console.log('计算属性更新：', newVal)
  },
  { deep: true }
)

补充说明 #

如果计算属性依赖的someOtherObject.id会发生变化，不需要额外配置，计算属性会自动追踪该依赖，变更时也会触发对应watch回调。

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