vue3中ref和reactive區(qū)別與聯(lián)系
區(qū)別
1、ref既可定義基本數(shù)據(jù)類型，也可以定義引用數(shù)據(jù)類型，reactive只能定義應(yīng)用數(shù)據(jù)類型
2、ref在js中取響應(yīng)值需要使用 .value，而reactive則直接取用既可
3、ref定義的對象通過.value重新分配新對象時依舊保持?jǐn)?shù)據(jù)響應(yīng)式，而reactive重新分配新對象會失去響應(yīng)式
4、使用ref定義引用數(shù)據(jù)類型時，通過watch監(jiān)聽該響應(yīng)式對象如果未配置deep: true，當(dāng)改變對象屬性時，不會觸發(fā)watch，只有重新分配新對象才會觸發(fā)watch，配置deep: true才會觸發(fā)，且會導(dǎo)致newVal和oldVal是一樣的，(因?yàn)閣atch監(jiān)聽的是地址，只改變屬性值時地址是不變的)；而reactive定義的對象默認(rèn)開啟deep: true，且無法關(guān)閉，改變對象屬性，會觸發(fā)watch。
例子
// 例1：(區(qū)別1)
let name = ref('張三');
let userInfo = ref({age: 18, address: '北京市天安門'});
let studyInfo = reactive({school: '清北大學(xué)', score: 100});
// 例2：(區(qū)別2)
name.value; // 張三
userInfo.value.age; // 18
userInfo.value.address; // 北京市天安門
studyInfo.school; // 清北大學(xué)
studyInfo.score; // 100
// 例3：(區(qū)別3)
name.value = "zhangsan"; // 頁面上的數(shù)據(jù)會響應(yīng)式更新，張三 --> zhangsan
userInfo.value = {age: 22, address: '上海市陸家嘴'}; // 頁面也會響應(yīng)式更新userInfo的相關(guān)數(shù)據(jù)
studyInfo = {school: '復(fù)交大學(xué)', score: 99}; // 頁面不會響應(yīng)式更新studyInfo，但是js里的studyInfo 實(shí)際是變了的
// 解決studyInfo失去響應(yīng)式的問題
Object.assign(studyInfo, {school: '復(fù)交大學(xué)', score: 99}); // 這樣就可以響應(yīng)式更新了
// 錯誤寫法
studyInfo = reactive({school: '復(fù)交大學(xué)', score: 99}); // studyInfo實(shí)際已經(jīng)是個新reactive對象了
聯(lián)系
ref定義的引用數(shù)據(jù)類型，實(shí)際也在內(nèi)部調(diào)用了reactive，value中返回的依舊是個proxy
補(bǔ)充
如果使用ref不想手敲.value時，可以在volar插件中配置 Dot Value，勾選上，會自動給你補(bǔ)齊.value文章來源：http://www.zghlxwxcb.cn/news/detail-822235.html
開發(fā)中如何選擇ref還是reactive
1、定義基本數(shù)據(jù)類型必須用ref；
2、定義層級不深的響應(yīng)式對象ref和reactive均可；
3、定義層級比較深的響應(yīng)式對象，推薦使用reactive；
4、定義表單的話推薦使用reactive。
以上只是建議，非強(qiáng)制性。
歡迎補(bǔ)充指正文章來源地址http://www.zghlxwxcb.cn/news/detail-822235.html
到了這里，關(guān)于vue3中ref和reactive聯(lián)系與區(qū)別以及如何選擇的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
