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

本篇內(nèi)容主要講解“Vue3中reactive丟失響應(yīng)式問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3中reactive丟失響應(yīng)式問題怎么解決”吧!

問題描述：

使用 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í)例，無論是修改還是重新賦值都會(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>

到此，相信大家對(duì)“Vue3中reactive丟失響應(yīng)式問題怎么解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！