再三說明 僅僅個人學(xué)習(xí)用，不誤導(dǎo)別人
我覺得props 會創(chuàng)建對應(yīng)的屬性，去接受這些值，比如傳遞一個ref的基本值 age
props.age = age.value
傳遞一個ref的引用值 person
props.person= person.value
傳遞一個reactive的引用值 person
props.person= person
最開始時候，props指向了一個響應(yīng)式的reactive person，如果我們手動將person = {} 整個替換掉，是不影響原來指向的值的（setup只在初始化時執(zhí)行一次，所有一開始props指向的是一個響應(yīng)式的person，而當(dāng)前改變的person 并不影響，props當(dāng)中的person 所以也無法監(jiān)聽）
1、父組件使用reactive 接收數(shù)據(jù)
let person = reactive({
age: 21,
name: 'test',
info: {
a: 1
}
});
person 和 info 以及prop都是一個reactive對象，都可以作為watch第一個參數(shù)
const props = defineProps({
person: {
age: Number,
name: String,
info: {
a: Number
}
}
});
可以監(jiān)聽到info 里邊某個屬性變化
watch(person.info, (value) => {
console.log(value);
})
整個info 被替換掉也可以監(jiān)聽到
watch(() => person.info, (value) => {
console.log(value);
})
整個person 替換掉 無法被監(jiān)聽，因為props當(dāng)中的person 指向的是一個已經(jīng)封裝了的reactive對象
如果在父組件當(dāng)中直接person = newValue props是無法監(jiān)聽到的
2、父組件使用ref 接收數(shù)據(jù)
let person = ref({
age: 21,
name: 'test',
info: {
a: 1
}
});
將person.value = { } 整個替換
可以監(jiān)聽到
watch(props, (value) => {
console.log(value);
})
無法監(jiān)聽
watch(props.person, (value) => {
console.log(value);
})
可以監(jiān)聽到person 被整個替換掉
watch(() => props.person, (value) => {
console.log(value);
})
做項目中，我將修改 或者 新增的表單組件分離出去了，每次新增或者修改時候需要給表單組件傳遞一個person 值，新增時候需要置空，修改時候需要賦予值
我們知道person = {}是沒辦法監(jiān)聽到的，所以采用文章來源：http://www.zghlxwxcb.cn/news/detail-680358.html
let person = ref({
age: 21,
name: 'test',
info: {
a: 1
}
});
const add= ()=>{
person.value = {}
]
const add= ()=>{
Object.assign(person.value,{age:2,name:'test'})
]
監(jiān)聽變化文章來源地址http://www.zghlxwxcb.cn/news/detail-680358.html
到了這里，關(guān)于vue3 監(jiān)聽props 的變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
