Vue3為何推薦使用ref而不是reactive？
首先二者的異同點(diǎn)是：
1.ref 用于將基本類型的數(shù)據(jù)（如字符串、數(shù)字得问，布爾值等）和引用數(shù)據(jù)類型(對(duì)象)轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。使用 ref 定義的數(shù)據(jù)可以通過(guò).value屬性訪問(wèn)和修改软免。
? ? ?ref聲明使用：? ??
? ? ? ? ? ? ? ref聲明 let num = ref(0);let arr = ref([]);? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?ref使用? num.value = 2; arr.value = [1,2,3];
2.reactive 用于將對(duì)象轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)宫纬，包括復(fù)雜的嵌套對(duì)象和數(shù)組。使用 reactive 定義的數(shù)據(jù)可以直接訪問(wèn)和修改屬性膏萧。
? ? ?reactive聲明使用：?
? ? ? ? ? ? ? ? ?聲明： let obj= reactive({nunm:1}); let arr= reactive([1,2,3]);??
? ? ? ? ? ? ? ? ?使用：obj.num = 2; arr[0] = 3;?
原因一：reacitve功能單一漓骚，只能聲明引用數(shù)據(jù)類型，而無(wú)法聲明基本數(shù)據(jù)類型榛泛。而ref既可以聲明基本數(shù)據(jù)類型蝌蹂，也可以聲明引用數(shù)據(jù)類型。
? 注意: 如果使用reactive聲明基礎(chǔ)數(shù)據(jù)類型并不會(huì)報(bào)錯(cuò)曹锨，但是聲明的變量不具備響應(yīng)式的特點(diǎn)孤个，無(wú)法達(dá)到數(shù)據(jù)驅(qū)動(dòng)改變視圖更新的基本需求，所以這種使用方式不推薦使用沛简。
原因二：reactive使用不當(dāng)會(huì)失去響應(yīng)齐鲤。? ??
? let state = reactive({count:0});
? state = {count: 10}; 這樣直接賦值一整個(gè)對(duì)象會(huì)導(dǎo)致數(shù)據(jù)更新斥废，但DOM沒(méi)有同步更新從而失去響應(yīng)式。
注意：reactive聲明的對(duì)象在解構(gòu)賦值后會(huì)丟失響應(yīng)性给郊，需要配合使用toRefs方法牡肉。
例如：const state = reactive({ count :0});
? ? ? ? ? ? let { count } = toRefs(state);
? ? ? ? ? ? count += 1；
需要這樣結(jié)構(gòu)丑罪，count才會(huì)同步更改荚板。
解決辦法：需要一個(gè)個(gè)賦值，state.count = 10,這樣賦值才會(huì)保持響應(yīng)性吩屹，保證數(shù)據(jù)和視圖同步更新跪另。
