Vue3中reactive丟失響應式問題詳解

更新時間：2023年03月29日 09:36:17 作者：Baobao小包

在vue3中,如果你用reactive聲明了一個對象,用另一個對象直接給它賦值,那么它就會失去響應式,下面這篇文章主要給大家介紹了關于Vue3中reactive丟失響應式問題的相關資料,需要的朋友可以參考下

問題描述：

使用 reactive 定義的對象，重新賦值后失去了響應式，改變值視圖不會發(fā)生變化。

測試代碼：

<template>
    <div>
        <p>{{ title }}</p>
        <ul>
            <li v-for="(item, index) in tableData" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>
 
<script setup>
    import { ref, reactive, onMounted } from 'vue'
    
    const title = ref('我是標題')
    let tableData = reactive([1, 2, 3])
 
    onMounted(() => {
        title.value = '我是段落',
        tableData = [1, 1, 1]
        console.log("title=", title)
        console.log("tableData=", tableData)
    })    
</script>

輸出結果：

從上述測試代碼中，ref 定義的對象有響應式，而 reactive 定義的對象失去了響應式，這是什么原因呢？官網(wǎng)中寫到：

如果將一個對象賦值給 ref ，那么這個對象將通過 reactive() 轉為具有深層次響應式的對象。

那么，為什么 ref 調(diào)用 reactive 處理對象重新賦值后，不會丟失響應式，但 reactive 卻丟失了呢？

第一步：當我們修改 xxx.value 值的時候，setter 調(diào)用了 toReactive 方法

class RefImpl {
    constructor(value, __v_isShallow) {
        this.__v_isShallow = __v_isShallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = __v_isShallow ? value : toRaw(value);
        this._value = __v_isShallow ? value : toReactive(value);
    }
    get value() {
        trackRefValue(this);
        return this._value; // get方法返回的是_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); // set方法調(diào)用 toReactive 方法
            triggerRefValue(this, newVal);
        }
    }
}

第二步：toReactive 方法判斷是否是對象，是的話就調(diào)用 reactive 方法

const toReactive = (value) => isObject(value) ? reactive(value) : value;

第三步：reactive 方法，先判斷數(shù)據(jù)是否是“只讀”的，不是就返回 createReactiveObject() 方法處理后的數(shù)據(jù)（createReactiveObject 方法將對象通過 proxy 處理為響應式對象）

function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

結論：

ref 定義數(shù)據(jù)（包括對象）時，都會變成 RefImpl(Ref 引用對象) 類的實例，無論是修改還是重新賦值都會調(diào)用 setter，都會經(jīng)過 reactive 方法處理為響應式對象。

但是 reactive 定義數(shù)據(jù)（必須是對象），是直接調(diào)用 reactive 方法處理成響應式對象。如果重新賦值，就會丟失原來響應式對象的引用地址，變成一個新的引用地址，這個新的引用地址指向的對象是沒有經(jīng)過 reactive 方法處理的，所以是一個普通對象，而不是響應式對象。

如何正確使用 reactive 呢？

使用 reactive 定義數(shù)據(jù)時，使用對象包含鍵值對的形式，那么就會避免重新賦值的問題。那么，修改測試代碼為：

<template>
    <div>
        <p>{{ title }}</p>
        <ul>
            <li v-for="(item, index) in obj.tableData" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>
 
<script setup>
    import { ref, reactive, onMounted } from 'vue'
    
    const title = ref('我是標題')
    let obj = reactive({
        tableData: [1, 2, 3]
    })
 
    onMounted(() => {
        title.value = '我是段落',
        obj.tableData = [1, 1, 1]
    })    
</script>