vue3 的 watch 不能监视 toRef 的值

本文主要是介绍vue3 的 watch 不能监视 toRef 的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于vue3 的 watch 不能监视 toRef 的值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---