* 情况一
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
,
这样就能确保,子组件,能够正确地获取到父组件传递的更新后的值