* 情况一let props = withDefaults(defineProps<{ list: Array<any> }>(), {list: () => [],})const list = toRef(props.list)watch(list.value, (newVal, oldVal) =>{console.log('newVal=', newVal) })---------------------------------------------------------------------------------------------* 情况二let props = withDefaults(defineProps<{ list: Array<any> }>(), {list: () => [],})watch(() => ({...props}), (newVal, oldVal) => {console.log('newVal=', newVal) }, { immediate: true, deep: true },)
情况一中的watch
是无效的,
因为,
toRef
创建了一个 ref,但是,它只会在首次渲染时获取 props.list 的值,之后不再追踪其变化,
所以,
为了在子组件中响应式地追踪 props.list
的变化,你应该直接在watch
使用 props.list
,而不是 toRef
,
这样就能确保,子组件,能够正确地获取到父组件传递的更新后的值