Vue3中ref與reactive的介紹和拓展

本篇內容主要講解“Vue3中ref與reactive的介紹和拓展”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3中ref與reactive的介紹和拓展”吧!

一、ref和reactive

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

• vue3中實現響應式數據的方法是就是使用ref和reactive，所謂響應式就是界面和數據同步，能實現實時更新

• vue2中響應式是通過defineProperty實現的，vue3中是通過ES6的Proxy來實現的

1.reactive

• reactive的參數必須是一個對象，包括json數據和數組都可以，否則不具有響應式

• 如果給reactive傳遞了其他對象（如時間對象），默認情況下修改對象界面不會自動更新，如果想更新，可以通過給對象重新賦值來解決

2.ref

既然有了reactive，為何還要ref呢？當我們只想讓某個變量實現響應式的時候，采用reactive就會比較麻煩，因此vue3提供了ref方法進行簡單值的監聽，但并不是說ref只能傳入簡單值，他的底層是reactive，所以reactive有的，他都有。還是那句老話：

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

• 在vue中使用ref的值，不用通過.value獲取

• 在js中使用ref的值，必須通過.value獲取

二、shallowRef和shallowReactive

遞歸監聽和非遞歸監聽
ref和reactive都屬于遞歸監聽，也就是數據的每一層都是響應式的，如果數據量比較大，非常消耗性能，非遞歸監聽只會監聽數據的第一層。

1. ref和shallowRef

• ref定義的數據每一層都是響應式數據

• shallowRef定義的數據，只有第一層是響應式的，即只有在更改.value的時候才能實現響應式

let age = ref({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各層數據
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'
        }
      }
    })
//打印各層數據
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

使用shallowRef后，可以通過triggerRef()方法主動更新界面，實現界面刷新

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

2. reactive和shallowReactive

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

三、toRaw

toRaw的出現是解決什么問題呢？

有些時候我們不希望數據進行響應式實時更新，可以通過toRaw獲取ref或reactive引用的原始數據，通過修改原始數據，不會造成界面的更新，只有通過修改ref和reactive包裝后的數據時才會發生界面響應式變化。

let obj1 = {...};
//state和obj1是引用關系，state的本質是一個Proxy對象，其中引用了obj1
let state = reactive(obj1);
//通過toRaw方法獲取到原始數據，其實是獲取到obj1的內存地址，obj2和obj1是完全相等的
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true

有些同學會問，那直接使用obj1來修改數據不就行了嗎？可關鍵是我們在使用reactive定義數據時一般不會先定義一個obj，再將他傳給reactive，都是直接在reactive中寫數據的。

四、markRaw

與toRaw不同，markRaw包裝后的數據永遠不會被追蹤！

暫時沒發現有什么用處(手動狗頭)

let obj1 = {name: "lijing", age: 18}
let obj2 = markRaw(obj1);
//此時reactive包裝的數據雖然是響應式對象，但是不會被跟蹤，也不會產生效應式效果
let state1 = reactive(obj2)

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

五、toRef和toRefs

ref和toRef都是用來構造響應式數據，兩者有什么區別呢，看兩個例子

1. ref

復制，修改響應式數據不會影響以前的數據，數據發生改變界面就會自動更新

轉換后的是一個RefImpl類型

可以看到，使用ref對一個對象的某個簡單數據類型屬性進行響應式改造后，通過修改響應式數據不會影響到原始數據，如上圖中，通過state1修改值后，obj1中的a屬性值沒有發生變化。這里有個注意點：修改的這個屬性必須是簡單數據類型，一個具體的值，不能是引用，如果該屬性也是一個對象，則會影響，因為對象--->引用！

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

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

2.  toRef

如果使用toRef來轉換，則修改響應式數據會影響到原始數據，數據發生改變，但是界面不會自動更新

轉換后的是一個ObjectRefImpl類型

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

3.  toRefs

遍歷對象中的所有屬性，將其變為響應式數據，這是因為toRef只能傳一個key，toRefs所達到的效果與toRef一樣

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

到此，相信大家對“Vue3中ref與reactive的介紹和拓展”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！