vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题

更新时间：2023年06月06日 11:29:45 作者：秃头小宝贝@

这篇文章主要介绍了vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

reactive定义的引用类型直接赋值导致数据失去响应式

<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive([])
onMounted(()=>{
	userMenu=[1,2,3]
})
</script>
<template>
	<div>示例：{{userMenu}}</div>
</template>
<style>
</style>

如上代码，我们定义了一个userMenu的reactive数组，我们在onMounted生命周期直接给userMenu重新赋值为【1,2,3】，但是我们打开页面显示的仍然是之前的空数组

这是因为，reactive定义的数组或者对象，不能直接赋值修改，否则定义的数据userMenu将失去响应性。

我们可以按照如下代码：

<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive({
	arr:[]
})
onMounted(()=>{
	userMenu.arr=[1,2,3]
})
</script>
<template>
	<div>示例：{{userMenu.arr}}</div>
</template>
<style>
</style>

将空数组作为对象的一个属性，我们直接修改arr属性为【1,2,3】，此时userMenu不会失去响应性，页面内容也就跟着变化成【1,2,3】

注意：

vue3中reactive定义的引用类型直接赋值导致数据失去响应式，我们可以通过修改对象的属性的形式，实现修改数据

vue3中reactive的理解

1.什么是reactive?

reactive是Vue3中提供实现响应式数据的方法.

在Vue2中响应式数据是通过defineProperty来实现的.

而在Vue3响应式数据是通过ES6的Proxy来实现的

2.reactive注意点

reactive参数必须是对象(json/arr)

如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.

错误示范

当传递的是非对象时,页面不会发生响应

正确实例

arr正确实例

传入数组会转成proxy对象

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目发布有缓存正式环境不更新的解决方案
vue项目每次发布新版本后,测试人员都要强制刷新才能更新浏览器代码来验证bug,下面这篇文章主要给大家介绍了关于vue项目发布有缓存正式环境不更新的解决方案,需要的朋友可以参考下
2024-03-03
Vue2.0实现简单分页及跳转效果
这篇文章主要为大家详细介绍了Vue2.0实现简单数据分页，及页数的跳转效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue如何统一样式(reset.css与border.css)
这篇文章主要介绍了vue如何统一样式(reset.css与border.css)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
解决vue刷新页面以后丢失store的数据问题
这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue keep-alive实践总结（推荐）
本篇文章主要介绍了Vue keep-alive实践总结（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue 组件使用中的一些细节点
这篇文章主要介绍了vue 组件使用中的一些细节点，大概有两大细节点，本文通过基础实例给大家介绍的非常详细，需要的朋友参考下吧
2018-04-04
Vue的data、computed、watch源码浅谈
这篇文章主要介绍了Vue的data、computed、watch源码浅谈，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用
这篇文章主要介绍了vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue如何调用浏览器分享功能详解
这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
一文详解Pinia和Vuex与两个Vue状态管理模式
这篇文章主要介绍了一文详解Pinia和Vuex与两个Vue状态管理模式，Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia
2022-08-08