1.替換對象后導(dǎo)致失效
簡單理解 : 變量指向的對象換了,對原來的對象,當(dāng)然沒有了響應(yīng)式的效果了。
// 聲明 變量
let obj1 = reactive({name:"第一個對象"})
// 改變 變量的指向
obj1 = reactive({name:"第二個對象的屬性"})
console.log('obj1.name : ',obj1.name)
2.解構(gòu)之后導(dǎo)致失效
將 reactive() 的對象解構(gòu)成本地變量之后,
直接操作本地變量,是不會影響 原對象的屬性值的。
這個也好理解,可以把解構(gòu)看作是 定義了一個新的普通變量,
修改普通變量的值,當(dāng)然是不會對響應(yīng)式對象造成影響了,它倆根本就不是一個對象。
// 聲明 變量
const obj2 = reactive({id:1002,name:"第一個對象"})
// 解構(gòu)出來 并重新賦值
let {name,id} = obj2;
id = 2002;
name = '本地變量name的值'
// obj2 不會改變,但是 name 和 id 的值會發(fā)生變化
console.log('obj2 : ',obj2)
console.log('name : ',name)
console.log('id : ',id)
3.屬性直接作為函數(shù)參數(shù)導(dǎo)致失效
將 reactice() 對象的屬性,單獨作為函數(shù)參數(shù)的時候,
若函數(shù)體內(nèi)對此屬性進(jìn)行了修改,也不會對原屬性產(chǎn)生影響。
可以理解為 是一種【值傳遞】的方式,而非 【引用傳遞】。
補充 :
但是,如果函數(shù)的參數(shù)是直接把整個的對象傳進(jìn)去的,則該對象讓然保持響應(yīng)式的狀態(tài)!
此處可以理解為【引用傳遞】。
屬性作為參數(shù)案例
// 聲明 變量
const obj2 = reactive({id:1002,name:"第一個對象"})
// 定義一個函數(shù)
const sayHello = (name:string):void => {
console.log('hello-1 : '+name)
// 對參數(shù)進(jìn)行修改
name = '修改后的名稱'
console.log('hello-2 : ',name)
}
// 調(diào)用函數(shù)
sayHello(obj2.name)
// obj2 不會改變,屬性值還是原來的值
console.log('obj2 : ',obj2)
文章來源:http://www.zghlxwxcb.cn/news/detail-752524.html
整個對象作為參數(shù)
// 聲明 變量
const obj2 = reactive({id:1002,name:"第一個對象"})
// 定義一個函數(shù)
const sayObj = (abc:any) =>{
abc.name = 'aaa'
console.log('對象屬性修改完成')
}
sayObj(obj2)
// obj2 不會改變,屬性值還是原來的值
console.log('obj2 : ',obj2)
文章來源地址http://www.zghlxwxcb.cn/news/detail-752524.html
到了這里,關(guān)于Vue3-04-reactive() 響應(yīng)式失效的三種情況的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!