Vue3子组件watch无法监听父组件传递的属性值

概要

父组件传递数组或对象给子组件，子组件无法watch监听到，控制台不打印内容。

一、原因

1.异步传值：使用 props 进行父子组件通信时，父组件通过接口获取值再传给子组件，子组件可能会在父组件传递之前就渲染完成，导致父组件无法将新内容传递给子组件。
2.代码问题：要么是组件传值时，props传递的内容：list,层次太深，导致watch无法监听到其发生变化；再者就是watch监听的代码有问题。

二、解决办法

首先是代码问题，可以将自己的代码与下面的watch监听代码比对，看是否有问题
特别是下面这行代码，需要格外注意。
()=>props.userData
然后是watch特殊的参数：
deep: true ：深度监听：在 Vue.js 的watch选项中，deep: true表示深度监听。当你监听一个对象或数组时，默认情况下，Vue.js 只会在对象或数组的引用发生变化时才会触发watch回调函数。
immediate: true ：立即执行：在watch选项中，immediate: true表示在watch被创建时，立即执行一次watch回调函数。

const props = defineProps({
  userData: {
    type: Object,
    default: () => {},
  },
  loading: Boolean,
})
// 子组件向父组件传值代码
const emit = defineEmits()

watch(
  () => props.userData,
  (res) => {
      getList()
  },
  { deep: true, immediate: true }
)

这样基本就解决了大部分问题。
如果还不行，可以在父组件传值时，使用 JSON.parse(JSON.stringify(list)),以及在子组件使用nextTick(()=>{})等方法来尝试解决。（要是还不行，就百度或AI）

小结

watch监听在我的前端生涯里用的还是挺多的，这里总结一下。