Vue3中reactive丢失响应式问题怎么解决

发布时间:2023-05-10 15:04:37 作者:iii
来源:亿速云 阅读:135

本篇内容主要讲解“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>

输出结果:

Vue3中reactive丢失响应式问题怎么解决

从上述测试代码中,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丢失响应式问题怎么解决

到此,相信大家对“Vue3中reactive丢失响应式问题怎么解决”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Reactive架构的知识点有哪些
  2. Vue中Ref与Reactive的区别是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

reactive vue3

上一篇:kafka序列化器和拦截器怎么自定义使用

下一篇:python chinesecalendar报错no available data for year {}怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》