題引：

在我們從vue2過(guò)渡到vue3的時(shí)候，對(duì)于數(shù)據(jù)響應(yīng)式的變化其實(shí)是懵懵懂懂的。從以往直接在data函數(shù)里面定義變量到每一次都要使用ref/reactive時(shí)，是有些不適應(yīng)的。但問(wèn)題不大，畢竟在大前端時(shí)代中，如果不及時(shí)跟上時(shí)代的步伐，不僅技術(shù)沒(méi)跟上，面試還容易被卡。所以今天來(lái)聊聊在使用vue3開(kāi)發(fā)時(shí)對(duì)于數(shù)據(jù)響應(yīng)式的理解。

vue3的響應(yīng)式是基于 proxy

從vue2的 Object.defineProperty 到vue3的 proxy 可謂是一個(gè)質(zhì)的飛躍。vue2的響應(yīng)式是需要遞歸+遍歷每一個(gè)對(duì)象的屬性進(jìn)行數(shù)據(jù)劫持，而在vue3中只需要對(duì)對(duì)象層進(jìn)行監(jiān)聽(tīng)即可。好了話不多說(shuō)，開(kāi)始講解一些常見(jiàn)的響應(yīng)式問(wèn)題。

ref和reactive之間的關(guān)系

如果我們用ref定義基本類(lèi)型時(shí)，實(shí)際上還是使用 Object.defineProperty 進(jìn)行數(shù)據(jù)劫持監(jiān)聽(tīng)。但如果是定義引用類(lèi)型時(shí)，底層代碼上是借用 reactive 函數(shù)進(jìn)行數(shù)據(jù)劫持的。因此ref和reactive關(guān)系是緊湊的。通過(guò)源碼的我們是可以確認(rèn)的。

我們可以看到，this_value = useDirectValue ? newVal : toReactive(newVal) 是進(jìn)行了判斷，而 useDirectValue 是進(jìn)行判斷是否是淺層的、僅可讀的數(shù)據(jù)。 那么如果我們傳入的是一個(gè)對(duì)象，那么就會(huì)進(jìn)入 toReactive(newVal) 這一步。 toReactive 函數(shù)就是進(jìn)行reactive定義的函數(shù)入口。

reactive定義的變量重新賦值會(huì)失去響應(yīng)式，而ref不會(huì)

我們一開(kāi)始接觸vue3的時(shí)候，會(huì)對(duì)這個(gè)問(wèn)題十分的不解，只是知道有這個(gè)問(wèn)題而不知其根，今天就來(lái)講講這個(gè)問(wèn)題。

import {ref,reactive} from 'vue';
let test = {age:2};
let obj = reactive({age:1})
let obj1 = ref({age:1})

obj = test; 
obj1.value = test; 

通過(guò)reactive()包含的對(duì)象是進(jìn)行了內(nèi)部的proxy代理，因此具有響應(yīng)式。但是像test這個(gè)對(duì)象，它是沒(méi)有進(jìn)行數(shù)據(jù)劫持的，而對(duì)象賦值的時(shí)候?qū)嶋H上是引用地址賦值。那么obj這個(gè)對(duì)象變成了一個(gè)沒(méi)有數(shù)據(jù)劫持的引用地址，那么它也就失去了響應(yīng)式。但是obj1重新賦值時(shí)會(huì)保留自身的響應(yīng)式。其實(shí)很簡(jiǎn)單，跟上圖的代碼是有關(guān)的。細(xì)心的人會(huì)發(fā)現(xiàn)，在 set 函數(shù)里面有這么一段代碼。

是的，在我們對(duì)ref定義的變量重新賦值時(shí)會(huì)進(jìn)入 set 函數(shù)，且重新賦值的是一個(gè)對(duì)象的話，那么它會(huì)再次進(jìn)入 toReactive 函數(shù)進(jìn)行數(shù)據(jù)劫持，這就是為什么ref定義的變量重新賦值對(duì)象時(shí)依舊保留響應(yīng)式的根本原因。

解構(gòu)響應(yīng)式對(duì)象會(huì)造成響應(yīng)式丟失

通過(guò)上面我都知道，不管是ref還是reactive定義的對(duì)象變量，都會(huì)經(jīng)過(guò) reactive 函數(shù)來(lái)進(jìn)行proxy代理。但是即使是對(duì)象，也會(huì)出現(xiàn)響應(yīng)式丟失的情況。

<script setup>
import {reactive,onMounted} from 'vue';
let obj = {a:18,aa:{age:18},aaa:{friend:{age:18}}
}
let rect = reactive(obj);
let {a,aa,aaa} = rect;
onMounted(()=>{setTimeout(()=>{a = 2;aa.age = 2;aaa.friend.age = 2;},2000)
})
</script>
<template><div>{{a}}</div><div>{{aa.age}}</div><div>{{aaa.friend.age}}</div>
</template> 

上面的運(yùn)行結(jié)果就是，a變量沒(méi)有響應(yīng)式，aa和aaa都是響應(yīng)式。這是因?yàn)樵诮鈽?gòu)賦值中，如果是原始類(lèi)型的話是按照值傳遞，如果是引用類(lèi)型的話是按照引用地址傳遞。除此之外 reactive() 定義的變量中 get函數(shù) 有這樣的一個(gè)處理

a = rect.a; //rect.a是一個(gè)基本類(lèi)型，所以是直接賦值
aa = rect.aa; //rect.aa是一個(gè)引用類(lèi)型，在內(nèi)部處理時(shí)觸發(fā)條件判斷，且非可讀對(duì)象即從Map數(shù)據(jù)結(jié)構(gòu)中返回已經(jīng)代理的響應(yīng)式對(duì)象
aaa = rect.aaa //跟rect.aa一個(gè)道理 

因此以后對(duì)響應(yīng)式對(duì)象進(jìn)行解構(gòu)時(shí)，記住以上的內(nèi)部判斷邏輯就可以拿捏它們了(#.#)。當(dāng)然，對(duì)vuex或者pinia的取值也是這個(gè)道理，也就是為什么需要借助 computed() 來(lái)實(shí)現(xiàn)響應(yīng)式了。因此 computed() 能返回響應(yīng)式。

最后

到此這篇關(guān)于vue3下會(huì)造成響應(yīng)式丟失的情況的文章就介紹到這了,更多相關(guān)vue3造成響應(yīng)式丟失的情況內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論