Vue2 Composition API中监听props的brands数组时watch不触发如何解决？

问题根因 #

• watch默认惰性执行，你的组件通过v-if="brands.length"控制渲染，组件初始化时brands已经有值，watch默认不会在初始化阶段执行回调
• watch默认浅监听，若父组件更新brands时是原地修改数组内容（比如调用push、splice等方法修改原数组，没有替换整个数组的引用），浅监听无法检测到数组内部的变化，不会触发回调

解决方案 #

方案1：调整watch配置项 #

修改watch的调用，新增immediate和deep配置适配场景：

watch(brands, (impressions: Brand[]) => {
  console.log(impressions);
  if (!impressions.length) return;
  const route = instance.proxy.$route;
  useTrackProductImpressions(impressions, route);
}, {
  immediate: true, // 初始化时就执行一次回调，适配v-if渲染时已有值的场景
  deep: true // 开启深度监听，可检测数组内部元素的变化
});

方案2：父组件修改数组时替换引用 #

如果不想开启深度监听（性能更优），可以调整父组件更新brands的逻辑，每次修改都替换整个数组的引用，比如：

// 不要直接原地修改
// this.brands.push(newBrand)
// 改为赋值新数组
this.brands = [...this.brands, newBrand]

// 批量更新同理
this.brands = newBrandsList

数组引用发生变化后，浅监听就能正常触发，无需额外开启deep配置。

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