使用vue3+provide+inject+watch组件层级太深之后偶发watch监测不到的情况

共计 594 个字符，预计需要花费 2 分钟才能阅读完成。

最近开发页面装修功能，封装了很多层级的子组件，顶层用provide设置当前编辑的右侧数据，如下图

在最里面的子组件使用了watch来监听数据的变化

// 监听数据变化
  watch(
    () => props.modelValue,
    (newVal) => {
      if (!newVal) return;
      rightStyle.value = newVal;
    },
    { deep: true }
  );
  watch(
    () => rightStyle.value,
    () => {
      // 数据更新后，通知父组件更新数据
      emit('update:modelValue', rightStyle.value);
    },
    { deep: true }
  );

然后奇怪的事情发生了，如下图

watch 竟然监听不到变化，经过反复摸索，代码变更为

// 监听数据变化
  watch(
    () => props.modelValue,
    (newVal) => {
      if (!newVal) return;
      rightStyle.value = newVal;
    },
    { deep: true, immediate: true } // 增加了immediate: true
  );
  watch(
    () => rightStyle.value,
    () => {
      // 数据更新后，通知父组件更新数据
      emit('update:modelValue', rightStyle.value);
    },
    { deep: true }
  );

监听的选项增加了 immediate: true，竟然可以了