快捷導(dǎo)航

Vue3中reactive丟失響應(yīng)式問題詳解

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

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

問題描述：

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

測(cè)試代碼：

<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('我是標(biāo)題')
    let tableData = reactive([1, 2, 3])
 
    onMounted(() => {
        title.value = '我是段落',
        tableData = [1, 1, 1]
        console.log("title=", title)
        console.log("tableData=", tableData)
    })    
</script>

輸出結(jié)果：

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

如果將一個(gè)對(duì)象賦值給 ref ，那么這個(gè)對(duì)象將通過 reactive() 轉(zhuǎn)為具有深層次響應(yīng)式的對(duì)象。

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

第一步：當(dāng)我們修改 xxx.value 值的時(shí)候，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 方法判斷是否是對(duì)象，是的話就調(diào)用 reactive 方法

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

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

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);
}

結(jié)論：

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

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

如何正確使用 reactive 呢？

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

<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('我是標(biāo)題')
    let obj = reactive({
        tableData: [1, 2, 3]
    })
 
    onMounted(() => {
        title.value = '我是段落',
        obj.tableData = [1, 1, 1]
    })    
</script>