vue3原始值響應方案及響應丟失問題怎么解決

這篇文章主要介紹“vue3原始值響應方案及響應丟失問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue3原始值響應方案及響應丟失問題怎么解決”文章能幫助大家解決問題。

一、ref 的引入

ref 就是解決 proxy 無法直接代理原始值的問題。我們先來看 ref 的使用：

const name = ref('小黑子')

ref 是怎么實現的呢？其實就是用對象“包裹”原始值。我們再來看一下 ref 的實現：

function ref(val){
    // 使用對象包裹原始值
    const wrapper = {
        value:val    
    }
    // 利用 reactive 將對象變成響應式數據
    return reactive(wrapper)
}

ref 的實現就是這么簡單。

ref 對原始值響應主要就做了這兩件事：

• 1、使用對象包裹原始值。

• 2、使用 reactive 將包裹對象變為響應式數據。

二、isref 的實現

我們使用 ref 創建一個響應式對象，但是我們要怎么區別一個對象是普通對象還是 ref 對象呢？于是我們的 isref 出現了。

我們看一下它的使用：

const name = ref('cj') console.log(isRef(name)); // true

那么它的實現原理是怎樣的呢？主要實現還是在 ref API內部，我們來看一下具體實現代碼：

function ref(val){
    const wrapper = {
        value:val    
    }
    Object.defineProperty(warpper,'__v_isRef',{
        value:true    
    })
    return reactive(wrapper)
}

原來就是在 ref 內部給 包裹對象添加一個不可枚舉不可寫的屬性，并且值為 true 。這樣我們就可以檢查該屬性來判斷是不是 ref 了。

function isRef(val) {
    return val.__v_isRef ?? false
}

三、響應丟失

什么是響應丟失？響應丟失就是響應式數據不進行響應了。我們來看下方代碼：

const obj = reactive({foo:1,bar:2})
const {foo,bar} = obj
obj.foo++    // foo不會改變，還是 1

上面的 obj 已經響應丟失了，也就不會觸發重新渲染。為什么會這樣呢？其實就是因為使用了結構賦值，展開運算符也會使其失效。

const obj = reactive({foo:1,bar:2})
const newObj = {...obj}
obj.foo++   // newObj.foo不會改變，還是 1

這就相當于重新定義了新的數據，而不再是原來的響應數據了，自然也就不具有響應式能力。

1、toRef登場

toRef 就是為了解決響應丟失的問題。我們來看一下它的實現：

function toRef(obj,key) {
    const wrapper = {
        get value() {
            return obj[key]        
        },
        set value(val) {
            obj[key] = val
        }    
    }
    Object.defineProperty(wrapper,'__v_isRef',{
        value:true    
    })
    return wrapper
}

傳入兩個參數，第一個是響應式數據，第二個是 obj 的一個鍵。

• 第一部分就是設置聲明一個對象，對象先設置了 value 屬性的 get 用于將訪問 toRef 值時，將返回傳入的響應式數據對應的屬性值，然后設置了 value屬性的 set 用于將設置 toRef 值時，就拿取設置的新值更新響應式數據對應的屬性值。也就是說，toRef 返回的對象還是利用的響應式數據。

• 第二部分用于設置返回的數據是 ref 數據。因為 toRef 返回的數據類似 ref 數據，為了統一就直接認定為是一個 ref 數據。

• 第三部分就是返回響應式數據對應聲明的屬性對象

這樣 toRef 就解決了響應丟失的問題。

2、toRefs 加入

toRefs 就是將整個響應式對象進行解構響應化。實現代碼如下：

function toRefs() {
    const ret = {}
    for (const key in obj) {
        ret[key] = toRef(obj,key)    
    }
    return ret
}

使用 for 循環逐一對屬性進行轉換。這下我們再來看一下使用：

const obj = reactive({foo:1,bar:2})
const {foo,bar} = toRefs(obj)
obj.foo++    // foo.value變為2了

3、詭異的其它響應式丟失情況

當屬性為非原始值的時候，解構之后還是依然能響應

const obj = reactive({foo:{age:18},bar:2})
const {foo,bar} = obj
obj.foo.age++    // foo.age變為2了
obj.bar++       // bar沒有改變，還是1

這是為什么？原因其實很簡單，因為非原始值賦值的是引用地址，也就是說解構后的變量其實還是指向原響應式數據的屬性。而原始值就是單純的賦值，就不會進行響應。

reactive 響應數據重新賦值后不再響應，ref 響應數據賦值后依然響應
let obj1 = reactive({foo:1,bar:2})
let obj2 = ref({foo:1,bar:2})
 
// 假如 obj1 與 obj2 直接展示在頁面上
obj1 = {boo:2,far:3}    // 頁面 obj1 還是 {foo:1,bar:2}
obj2.value = {boo:2,far:3}    // 頁面 obj2 變為 {boo:2,far:3} 了

這又是什么原因？reactive 重新賦值響應丟失，就是重新賦值了新的對象，自然就成為普通數據了，不再響應。而 ref 還是能響應，是因為 ref 在內部進行 set 處理。代碼如下：

function ref(val){
    const wrapper = {
        value:val
        set value(val) {    // isObject 這里代表判斷是否是非原始值的一個方法
             value = isObject(val) === 'Object' ? reactive(val) : val       
        }
    }
    Object.defineProperty(warpper,'__v_isRef',{
        value:true    
    })
    return reactive(wrapper)
}

我們明白了，其實 ref 在 set 中判斷了設置的新值是否是非原始值，如果是就調用 reactive 將其變為響應式數據。

四、unref 自動脫 ref       

我們在使用 ref 響應式數據時，會覺得總是需要 .value 來獲取值，增加了用戶的心智負擔。

那可不可以不通過 .value 訪問值，而時直接就能夠訪問值呢？

這樣用于也不用關心某個數據到底是不是 ref 數據，需不需要通過 value 屬性去獲取值。

這就到了我們的 unref 出手了。unref 實現了自動脫 ref 能力，自動脫 ref 就是如果讀取的屬性是一個 ref，則直接將該 ref 對應的 value 屬性值返回。

我們來看一下 unref 的實現：

function unref(target) {
    return new Proxy(target,{
        get(target,key,receiver) {
            const value = Reflect.get(target,key,receiver)
            return value.__v_isRef ? value.value : value        
        },
        set(target,key,newValue,receiver) {
            const value = target[key]
            if (value.__v_isRef) {
                value.value = newValue
                return true            
            }        
            return Reflect.set(target,key,newValue,receiver)
        }
    })
}

我們發現 unref 內部使用 Proxy 代理了目標對象，接收一個對象作為參數，并返回該對象的代理對象。當我們訪問 unref 的數據時，觸發 get 捕獲器，然后再捕獲器內部判斷了傳入對象是否是 ref 對象，如果是就直接返回 ref 的 .value 值。如果不是則直接返回代理對象。

當對 unref 返回的代理對象設置值時，觸發 set 捕獲器，如果代理的對象時 ref ，就將需要設置的新值賦值給 .value，不是則直接進行賦值處理。

知識擴展

當我們使用 ref 創建響應式數據后，將其在模板中展示，為什么不用 .value 了。

<script setup lang="ts">
import { ref } from 'vue'
const name = ref('小黑子')
</script>
 
<template>
  <div>{{ name }}</div>
</template>

其實原因很簡單，在組件 setup 中聲明的 ref 響應式數據會傳遞給 unref 函數進行處理。所以在模板中訪問 ref 的值，無需通過 value 屬性來訪問。

我們使用的 reactive 其實也是有 自動脫 ref 功能的，看一下下方例子：

const count = ref(0)
const obj = reactive({conut})
 
obj.count    // 0

我們可以看見 obj.count 是一個 ref 響應式數據。在 count 外層包裹一層對象，再傳遞給 reactive 后，再訪問 obj.count 時就不需要再通過 value 屬性訪問值了。

也正是因為 reactive 內部也同樣實現了自動脫 ref 的能力。

關于“vue3原始值響應方案及響應丟失問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。