一、ref和reactive

死死記?。簉ef本質(zhì)也是reactive，ref(obj)等價(jià)于reactive({value: obj})

• vue3中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive，所謂響應(yīng)式就是界面和數(shù)據(jù)同步，能實(shí)現(xiàn)實(shí)時(shí)更新
• vue2中響應(yīng)式是通過(guò)defineProperty實(shí)現(xiàn)的，vue3中是通過(guò)ES6的Proxy來(lái)實(shí)現(xiàn)的

1.reactive

• reactive的參數(shù)必須是一個(gè)對(duì)象，包括json數(shù)據(jù)和數(shù)組都可以，否則不具有響應(yīng)式
• 如果給reactive傳遞了其他對(duì)象（如時(shí)間對(duì)象），默認(rèn)情況下修改對(duì)象界面不會(huì)自動(dòng)更新，如果想更新，可以通過(guò)給對(duì)象重新賦值來(lái)解決

2.ref

既然有了reactive，為何還要ref呢？當(dāng)我們只想讓某個(gè)變量實(shí)現(xiàn)響應(yīng)式的時(shí)候，采用reactive就會(huì)比較麻煩，因此vue3提供了ref方法進(jìn)行簡(jiǎn)單值的監(jiān)聽，但并不是說(shuō)ref只能傳入簡(jiǎn)單值，他的底層是reactive，所以reactive有的，他都有。還是那句老話：

死死記住：ref本質(zhì)也是reactive，ref(obj)等價(jià)于reactive({value: obj})

• 在vue中使用ref的值，不用通過(guò).value獲取
• 在js中使用ref的值，必須通過(guò).value獲取

二、shallowRef和shallowReactive

遞歸監(jiān)聽和非遞歸監(jiān)聽
ref和reactive都屬于遞歸監(jiān)聽，也就是數(shù)據(jù)的每一層都是響應(yīng)式的，如果數(shù)據(jù)量比較大，非常消耗性能，非遞歸監(jiān)聽只會(huì)監(jiān)聽數(shù)據(jù)的第一層。

1. ref和shallowRef

• ref定義的數(shù)據(jù)每一層都是響應(yīng)式數(shù)據(jù)
• shallowRef定義的數(shù)據(jù)，只有第一層是響應(yīng)式的，即只有在更改.value的時(shí)候才能實(shí)現(xiàn)響應(yīng)式

let age = ref({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各層數(shù)據(jù)
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

let age = shallowRef({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各層數(shù)據(jù)
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

使用shallowRef后，可以通過(guò)triggerRef()方法主動(dòng)更新界面，實(shí)現(xiàn)界面刷新

function doSome(){
  age.value.f.s.c = 'c';
  //主動(dòng)更新界面
  triggerRef(age);
}

2. reactive和shallowReactive

注意：shallowReactive沒有類似triggerRef()的方法

三、toRaw

toRaw的出現(xiàn)是解決什么問題呢？

有些時(shí)候我們不希望數(shù)據(jù)進(jìn)行響應(yīng)式實(shí)時(shí)更新，可以通過(guò)toRaw獲取ref或reactive引用的原始數(shù)據(jù)，通過(guò)修改原始數(shù)據(jù)，不會(huì)造成界面的更新，只有通過(guò)修改ref和reactive包裝后的數(shù)據(jù)時(shí)才會(huì)發(fā)生界面響應(yīng)式變化。

let obj1 = {...};
//state和obj1是引用關(guān)系，state的本質(zhì)是一個(gè)Proxy對(duì)象，其中引用了obj1
let state = reactive(obj1);
//通過(guò)toRaw方法獲取到原始數(shù)據(jù)，其實(shí)是獲取到obj1的內(nèi)存地址，obj2和obj1是完全相等的
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true

有些同學(xué)會(huì)問，那直接使用obj1來(lái)修改數(shù)據(jù)不就行了嗎？可關(guān)鍵是我們?cè)谑褂胷eactive定義數(shù)據(jù)時(shí)一般不會(huì)先定義一個(gè)obj，再將他傳給reactive，都是直接在reactive中寫數(shù)據(jù)的。

四、markRaw

與toRaw不同，markRaw包裝后的數(shù)據(jù)永遠(yuǎn)不會(huì)被追蹤！

暫時(shí)沒發(fā)現(xiàn)有什么用處(手動(dòng)狗頭)

let obj1 = {name: "lijing", age: 18}
let obj2 = markRaw(obj1);
//此時(shí)reactive包裝的數(shù)據(jù)雖然是響應(yīng)式對(duì)象，但是不會(huì)被跟蹤，也不會(huì)產(chǎn)生效應(yīng)式效果
let state1 = reactive(obj2)

console.log(obj1 === obj2);//true

五、toRef和toRefs

ref和toRef都是用來(lái)構(gòu)造響應(yīng)式數(shù)據(jù)，兩者有什么區(qū)別呢，看兩個(gè)例子

1. ref

復(fù)制，修改響應(yīng)式數(shù)據(jù)不會(huì)影響以前的數(shù)據(jù)，數(shù)據(jù)發(fā)生改變界面就會(huì)自動(dòng)更新

轉(zhuǎn)換后的是一個(gè)RefImpl類型

可以看到，使用ref對(duì)一個(gè)對(duì)象的某個(gè)簡(jiǎn)單數(shù)據(jù)類型屬性進(jìn)行響應(yīng)式改造后，通過(guò)修改響應(yīng)式數(shù)據(jù)不會(huì)影響到原始數(shù)據(jù)，如上圖中，通過(guò)state1修改值后，obj1中的a屬性值沒有發(fā)生變化。這里有個(gè)注意點(diǎn)：修改的這個(gè)屬性必須是簡(jiǎn)單數(shù)據(jù)類型，一個(gè)具體的值，不能是引用，如果該屬性也是一個(gè)對(duì)象，則會(huì)影響，因?yàn)閷?duì)象--->引用！

例如上面例子中，如果傳入state1的是obj1.f，則情況完全不同

//等價(jià)于let state1 = ref({b: '2',s: {c: '3'}})
// 又等價(jià)于--->let state1 = reactive({value: {....}}})
let state1 = ref(obj1.f);

2.  toRef

如果使用toRef來(lái)轉(zhuǎn)換，則修改響應(yīng)式數(shù)據(jù)會(huì)影響到原始數(shù)據(jù)，數(shù)據(jù)發(fā)生改變，但是界面不會(huì)自動(dòng)更新

轉(zhuǎn)換后的是一個(gè)ObjectRefImpl類型

ref類似深拷貝，toref類似淺拷貝

3.  toRefs

遍歷對(duì)象中的所有屬性，將其變?yōu)轫憫?yīng)式數(shù)據(jù)，這是因?yàn)閠oRef只能傳一個(gè)key，toRefs所達(dá)到的效果與toRef一樣

tips:目前用的最多的還是ref和reactive，其他東西一般是后期用來(lái)改善性能使用的。

總結(jié)

到此這篇關(guān)于Vue3中ref與reactive的文章就介紹到這了,更多相關(guān)Vue3 ref與reactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論