背景描述
子組件展示父組件傳來的參數，展示的信息隨著父組件上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>
