Vue.js监听计算属性无更新问题求助（新手）

嘿，我之前也碰到过一模一样的问题！你的watch只在启动时触发两次，后续不再响应计算属性的更新，核心原因是Vue的watch默认是浅监听，而你的lastAndMarkPrice返回的是一个对象。

问题根源 #

当Vuex getter返回的对象只是内部属性发生变化，但对象本身的引用没有改变时，Vue的浅watch会认为这个值没有变化，所以不会触发回调。启动时的两次触发大概率是组件初始化阶段的默认执行（第一次oldValue为undefined，第二次是组件挂载后获取到初始值），但后续对象内部属性更新时，因为引用没变，watch就“视而不见”了。

两种可行解决方案 #

方案1：开启深度监听

给你的watch配置添加deep: true选项，让Vue递归监听对象内部的所有属性变化：

watch: {
  lastAndMarkPrice: {
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
      this.lastPriceUp = newValue.lastPrice > oldValue.lastPrice;
      this.lastPriceDn = newValue.lastPrice < oldValue.lastPrice;
      this.markPriceUp = newValue.markPrice > oldValue.markPrice;
      this.markPriceDn = newValue.markPrice < oldValue.markPrice;
    },
    deep: true, // 关键：开启深度监听
    // 如果不需要初始化时的额外触发，可以保持immediate为默认false
    // immediate: false
  }
}

方案2：让Vuex getter返回新对象

修改你的Vuex getter逻辑，确保每次返回一个全新的对象引用，这样即使内部属性值相同，引用变化也会触发watch：

// 在你的Vuex store getters中
getLastAndMarkPriceByExchange: (state) => (exchange, asset) => {
  // 假设原来的逻辑是获取目标数据对象
  const targetData = state.yourDataStructure[exchange][asset];
  // 使用展开运算符创建新对象，强制改变引用
  return { ...targetData };
}

小提示 #

如果你的lastAndMarkPrice对象层级比较深，深度监听可能会有轻微的性能开销，这时候方案2（返回新对象）会更高效；如果对象结构简单，深度监听就是最方便的选择。

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