背景描述
子組件展示父組件傳來的參數(shù)杉畜，展示的信息隨著父組件上tab的切換動態(tài)更新锭碳。
一開始的想法是單獨(dú)監(jiān)聽這個傳遞的參數(shù)欺税，但看了VUE3的文檔之后环肘，似乎對參數(shù)的監(jiān)聽必須精確到屬性脐瑰。例如參數(shù)為
{
name: 'Doctor',
gender: 'Timelord'
}
需要在子組件的watch中寫明監(jiān)聽的是name還是gender。
該參數(shù)中有很多可能會改變的屬性廷臼，一一監(jiān)聽過于麻煩苍在。所以改變思路，使用監(jiān)聽props來獲取所有所有傳參荠商。
實(shí)現(xiàn)方法
在父組件中寂恬，用于傳遞給子組件的參數(shù)必須為響應(yīng)式(eg. reactive)，否則子組件在監(jiān)聽時(shí)不會監(jiān)測到變換莱没，watch永遠(yuǎn)不會生效
immediate是立即開始監(jiān)聽初肉，在頁面首次渲染時(shí)可能為顯示為undefined，如果watch的變化需要手動觸發(fā)饰躲，不需要開啟
deep默認(rèn)開啟牙咏，可以忽略（參數(shù)為reactive臼隔，會默認(rèn)開啟deep，如果是ref妄壶，則不會默認(rèn)開啟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>
