Vue2监听可能为undefined的嵌套属性及默认值设置问题

问题重现 #

监听嵌套属性car.wheels时，该属性有时为undefined，尝试用计算属性包装后监听，但监听器未同步更新计算属性的变化，导致始终监听默认值。另外因car更新频繁且监听器逻辑较重，无法直接监听car本身，car为其他组件更新的store数据。

原监听代码：

watch: {
  'car.wheels': function(){
      // 处理逻辑
  }
}

尝试的计算属性方案（未生效）：

computed: {
  wheels(){
     return car.wheels ? car.wheels : somethingElse
  }
},
watch: {
   wheels: function(){
      // 处理逻辑
   }
} 

可行解决方案 #

方案一：在监听器中直接处理默认值 #

监听car.wheels时，开启immediate确保初始化时执行一次，同时在handler里判断值是否为undefined，替换为默认值后再执行逻辑。无需额外计算属性，直接处理：

watch: {
  'car.wheels': {
    immediate: true, // 初始化时立即执行
    handler(newVal) {
      const targetVal = newVal ?? somethingElse; // 用空值合并运算符处理默认值
      // 你的处理逻辑，使用targetVal而非newVal
    }
  }
}

注意：如果car本身可能为undefined，需要先判断car是否存在，避免报错：

'car.wheels': {
  immediate: true,
  handler(newVal, oldVal) {
    // 先确保car存在，再处理wheels的默认值
    const targetVal = this.car?.wheels ?? somethingElse;
    // 处理逻辑
  }
}

方案二：修复计算属性的依赖追踪 #

之前的计算属性失效，大概率是因为没有正确依赖car或car.wheels的变化。Vue2的计算属性依赖响应式数据才能触发更新，所以要确保计算属性里正确访问响应式的car：

computed: {
  wheels() {
    // 先判断car是否存在，再取wheels，避免报错
    if (!this.car) return somethingElse;
    return this.car.wheels ?? somethingElse;
  }
},
watch: {
  wheels: {
    immediate: true,
    handler(newVal) {
      // 处理逻辑
    }
  }
}

这里必须用this.car（如果是组件内的响应式数据）或者从store映射的响应式属性，确保Vue能追踪到依赖变化。如果car是从store通过mapState映射的，要确保它是响应式的，这样当store里的car.wheels更新时，计算属性会重新计算，监听器也会触发。

方案三：使用Vue2的$watch方法动态监听（可选） #

如果上述方案仍有问题，可以在组件挂载后动态监听car.wheels，同时处理默认值：

mounted() {
  this.$watch('car.wheels', (newVal) => {
    const targetVal = newVal ?? somethingElse;
    // 处理逻辑
  }, { immediate: true });
}

关键注意点 #

• 确保car和car.wheels是响应式数据：如果是store中的数据，要通过Vuex的mutations/actions修改，确保响应式更新；如果是组件内数据，要在data中声明或通过Vue.observable处理。
• 避免直接修改嵌套属性：如果是Vue2中修改car.wheels，要确保用Vue.set或展开运算符更新，比如this.$set(this.car, 'wheels', newValue)，否则无法触发响应式更新。

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