最近开发页面装修功能,封装了很多层级的子组件,顶层用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; }, {…