Vue3中使用setup监听props

背景描述

子组件展示父组件传来的参数，展示的信息随着父组件上tab的切换动态更新。

一开始的想法是单独监听这个传递的参数，但看了VUE3的文档之后，似乎对参数的监听必须精确到属性。例如参数为

{
      name: 'Doctor',
      gender: 'Timelord'
}

需要在子组件的watch中写明监听的是name还是gender。
该参数中有很多可能会改变的属性，一一监听过于麻烦。所以改变思路，使用监听props来获取所有所有传参。

实现方法

在父组件中，用于传递给子组件的参数必须为响应式(eg. reactive)，否则子组件在监听时不会监测到变换，watch永远不会生效

immediate是立即开始监听，在页面首次渲染时可能为显示为undefined，如果watch的变化需要手动触发，不需要开启

deep默认开启，可以忽略（参数为reactive，会默认开启deep，如果是ref，则不会默认开启deep）

// 父组件
<script>
export default {
  setup() {
    let traveller = reactive({
      name: 'Doctor',
      gender: 'Timelord'
    })
  }
}
</script>

// 子组件
<script>
export default {
  props: {
    traveller: {
      type: Object
    }
  }
  setup(props) {
    watch(
            props,
            (old, newProps) => {
                console.log('=======', newProps); //这里看到新值
            },
            // {   
            //     immediate: true,
            //     deep: true
            // }
        )
  }
}
</script>