VueJS问题：计算属性的监听器从未被调用

我来帮你排查这个问题，你的代码里有几个关键问题需要修正，同时还有更符合Vue设计理念的优化方案：

首先，最明显的语法错误 #

你在监听器的handler里写了newVal[0]，但函数参数是val和oldVal——newVal根本没定义！就算监听器触发了，这里也会直接报错，导致你误以为监听器没执行。先把这个改过来：

watch: { 
  sortedCars: { 
    handler: function (val, oldVal) { 
      // 把newVal换成参数里的val
      this.filterCarLabel = val[0]; 
    }, 
    deep: true 
  } 
},

然后，分析监听器没触发的核心原因 #

Vue的计算属性是缓存依赖的，只有当它的依赖项发生变化时，计算属性才会重新计算，进而触发监听器。你的sortedCars依赖两个东西：

• this.cars数组
• i18n.t()的翻译结果

所以如果这两个依赖都没变化，计算属性会直接返回缓存的结果，不会重新执行，监听器自然不会触发。你需要确认：

1. 当你期望监听器触发时，this.cars是不是真的发生了响应式变化？比如你是不是用了数组变异方法（push/splice/pop等）修改数组，或者用Vue.set修改了元素？直接通过下标修改（this.cars[0] = 'xxx'）Vue是检测不到的。
2. 如果你的排序依赖多语言切换，那i18n的当前语言是不是响应式的？只有当语言变化导致i18n.t()返回不同结果时，计算属性才会重新计算。

更推荐的优化方案：用计算属性替代watch #

其实Vue不推荐用watch监听计算属性，更优雅的方式是直接用另一个计算属性来推导filterCarLabel，这样完全不需要watch，代码更简洁也更符合响应式设计：

computed: {
  sortedCars() {
    function compare(a, b) {
      const textA = i18n.t(a).toLowerCase();
      const textB = i18n.t(b).toLowerCase();
      return textA.localeCompare(textB); // 用localeCompare替代手动判断，更简洁
    }
    return this.cars.slice().sort(compare);
  },
  // 直接从sortedCars推导filterCarLabel
  filterCarLabel() {
    return this.sortedCars.length > 0 ? this.sortedCars[0] : ''; // 加个空值判断更安全
  }
}

这样当sortedCars变化时，filterCarLabel会自动更新，完全不需要手动监听，还避免了watch带来的副作用。

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