Vue3中reactive丟失響應式問題怎么解決

本篇內容主要講解“Vue3中reactive丟失響應式問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3中reactive丟失響應式問題怎么解決”吧!

問題描述：

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

測試代碼：

<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 定義的對象失去了響應式，這是什么原因呢？官網中寫到：

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

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

第一步：當我們修改 xxx.value 值的時候，setter 調用了 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方法調用 toReactive 方法
            triggerRefValue(this, newVal);
        }
    }
}

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

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

 第三步：reactive 方法，先判斷數據是否是“只讀”的，不是就返回 createReactiveObject() 方法處理后的數據（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 定義數據（包括對象）時，都會變成 RefImpl(Ref 引用對象) 類的實例，無論是修改還是重新賦值都會調用 setter，都會經過 reactive 方法處理為響應式對象。

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

如何正確使用 reactive 呢？

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

<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>

到此，相信大家對“Vue3中reactive丟失響應式問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！