快捷導(dǎo)航

Vue3中reactive與ref函數(shù)使用場景

更新時間：2022年07月13日 09:18:31 作者：拜小白

這篇文章主要為大家介紹了Vue3?中有場景是?reactive?能做而?ref?做不了的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

如果你使用過 Vue3，你知道的，在 Vue3 中有兩個非常常用的響應(yīng)式 API：reactive 和 ref。它們會把我們想要追蹤的數(shù)據(jù)變成響應(yīng)式。

而且我們在使用時一直被告知 ref 用于創(chuàng)建基礎(chǔ)類型的響應(yīng)式，也可以創(chuàng)建引用類型的響應(yīng)式。而對于引用類型，底層也是轉(zhuǎn)換為 reactive 來進行響應(yīng)式處理。那既然這樣為撒還需要 reactive ，全部使用 ref 不就行了嗎？

雖然 ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)在腳本中需要通過 .value 才能訪問到呀！但是這里肯定影響不大。并且在模板中會自動添加上 .value，所以模板中不需要通過 .value 訪問。

既然這二者基本沒撒差別，但是還是暴露了 reactive 這個 API，難道有什么場景是 reactive 能做而 ref 做不了的？

簡單了解 ref & reactive

我們先簡單了解一下這兩個 API。

reactive

返回對象的響應(yīng)式副本，響應(yīng)式轉(zhuǎn)換是“深層”的——它影響所有嵌套 property。我們一般這樣寫。

const obj = reactive({ count: 0 })

并且可以直接使用。

const count = obj.count

ref

接受一個內(nèi)部值并返回一個響應(yīng)式且可變的 ref 對象。ref 對象僅有一個 .value property，指向該內(nèi)部值。我們一般是這樣寫。

const data = ref(xxx)

引用的時候，一般會通過data.value的方式引用。

const dataValue = data.value

通過跟蹤 Vue3 的源代碼可以證明，當(dāng)我們調(diào)用 ref 方法來定義響應(yīng)式數(shù)據(jù)時，當(dāng)參數(shù)為對象類型時，其實里面用的是 reactive 方法。也就是說上面的 data.value ，事實上是 reactive 方法創(chuàng)造出來的。

reactive 能做的 ref 也能做，并且還是用 reactive 做的

我們通過源碼來看看 ref 的源碼實現(xiàn)。

源碼分析版本：3.2.36

function ref(value) {
    return createRef(value, false);
}

ref 函數(shù)跳轉(zhuǎn)到 createRef 函數(shù)。

function createRef(rawValue, shallow) {
    ...
    return new RefImpl(rawValue, shallow);
}

createRef 函數(shù)返回的是 RefImpl 類的實例，換句話說，ref 創(chuàng)建出來的響應(yīng)式就是 RefImpl 實例對象。

const count = ref(1);
console.log(count);

我們重點來看看這個 RefImpl 類。

class RefImpl {
    constructor(value, __v_isShallow) {
        ... 
        this._value = __v_isShallow ? value : toReactive(value);
    }
    get value() {
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) {
        newVal = this.__v_isShallow ? newVal : toRaw(newVal);
        if (hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = this.__v_isShallow ? newVal : toReactive(newVal);
            triggerRefValue(this, newVal);
        }
    }
}

__v_isShallow 參數(shù)在這里默認(rèn)是 false，這里也順帶講一嘴，當(dāng)我們在使用 shallowRef 時，這個參數(shù)為 true。

function shallowRef(value) {
    return createRef(value, true);
}

Ref 與 Reactive 創(chuàng)建的都是遞歸響應(yīng)的，將每一層的 json 數(shù)據(jù)解析成一個 proxy 對象，shallowRef 與 shallowReactive 創(chuàng)建的是非遞歸的響應(yīng)對象，shallowReactive 創(chuàng)建的數(shù)據(jù)第一層數(shù)據(jù)改變會重新渲染 dom。

 var state = shallowReactive({
    a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 });
// 改變第一層的數(shù)據(jù)會導(dǎo)致頁面重新渲染
state.a = '1'
// 如果不改變第一層，只改變其他的數(shù)據(jù)頁面不會重新渲染 
state.gf.b = 2

通過 shallowRef 創(chuàng)建的響應(yīng)式對象，需要修改整個 value 才能重新渲染 dom。

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
});
// 不會重新渲染
state.value.a = 1
// 要修改整個 value 才能重新渲染
state.value = {
    a:'1',
    gf:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

如果想更新 shallowRef 的某一層數(shù)據(jù)，并且想觸發(fā)渲染，可以使用 triggerRef。

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.gf.f.s.d = 4
triggerRef(state)

所以這里會走到 toReactive(value) 函數(shù)。

const isObject = (val) =&gt; val !== null &amp;&amp; typeof val === 'object';
const toReactive = (value) =&gt; isObject(value) ? reactive(value) : value;

可以看到，如果傳入的參數(shù)是一個對象的話，返回值將會繼續(xù)調(diào)用 reactive 方法來進行包裹，reactive 最終會通過 Proxy 來進行實現(xiàn)響應(yīng)攔截，返回的也是一個 Proxy 對象，但在這里不重要，我們只需要知道當(dāng) ref 的參數(shù)為對象時，用的就是 reactive 方法。

const data = reactive({
  count: 1,
});
console.log(data);
const data_ref = ref({
  count: 1,
});
console.log(data_ref);

結(jié)果顯然，讓對 ref 傳入對象作為參數(shù)時和傳入基本類型作為參數(shù)返回結(jié)果情況是不一樣的。

基本類型返回值value就是具體的值，對象類型返回值value是 reactive 方法創(chuàng)建的 proxy 對象。

通過源碼來看，其實也證明了，在 Vue3 中，如果是把對象類型的數(shù)據(jù)弄成響應(yīng)式，reactive 和 ref 都可以，且ref 內(nèi)部是通過r eactive 來支持的。

也就是說，你 reactive 能做的，我 ref 也能做。

ref 能做，但是 reactive 不能做

其實通過上面的例子就能知道有什么是 reactive 不能做的呢？很明顯，reactive 不支持對基本類型數(shù)據(jù)響應(yīng)式，也就是說基本類型數(shù)據(jù)不能直接作為 reactive 的參數(shù)來使用。

簡單看看源碼。

function reactive(target) {
    ...
    return createReactiveObject(...);
}

reactive 函數(shù)跳轉(zhuǎn)到 createReactiveObject 函數(shù)。

const isObject = (val) =&gt; val !== null &amp;&amp; typeof val === 'object';
function createReactiveObject(...) {
    if (!isObject(target)) {
        {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }
    ...
    const proxy = new Proxy(...);
    proxyMap.set(target, proxy);
    return proxy;
}

createReactiveObject 一開始就會判斷 target 是否是對象，如果不是對象就會直接??提示返回。如果是對象就會把 target 用 Proxy 變成響應(yīng)式對象。