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丢失响应式问题的文章就介绍到这了,更多相关Vue3 reactive丢失响应式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇VUEJS 2.0 子组件访问/调用父组件的实例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue通过axios发送ajax请求基础演示,包括了axios发送简单get请求，axios get传参，axios发送post请求等基础代码演示需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue中的数据双向绑定问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
KeepAlive 是一个内置组件，那封装一个组件对于大家来说应该不会有太大的困难，它的核心逻辑在于它的 render 函数，它用 map 去记录要缓存的组件，就是 [key，vnode] 的形式，这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue如何将字符串的一部分处理为html文档并渲染到页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue.set 全局操作,结合简单实例形式分析了Vue.set 全局操作相关使用技巧与注意事项,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了vuejs事件中心管理组件间的通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue-resource调用promise取数据方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了elementUI select组件使用及注意事项详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论