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框架，感兴趣的朋友可以了解下2020-12-12
很高兴Vue 2.5 Level E 发布了。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染2017-10-10
这篇文章主要介绍了vant如何实现Collapse折叠面板标题自定义，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue+element实现下拉菜单并带本地搜索功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
最近有一个需求是很多个表单添加,编辑等操作,会用到很多input输入框,所以就想把input进行简单封装,这篇文章主要给大家介绍了关于vue3简单封装input组件和统一表单数据的相关资料,需要的朋友可以参考下2022-05-05
在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，那么如何解决，本文就来详细的介绍一下2021-09-09
mixins是一种分发 Vue 组件中可复用功能的使用方式,它是一个 js 对象,包含我们组件script中的任意功能选项,下面就跟随小编一起来看看它的具体使用吧2024-03-03
下面小编就为大家分享一篇对vue.js中this.$emit的深入理解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue实现电梯样式锚点导航效果流程，这种导航效果广泛应用于商城点餐购物情景，文中通过示例代码介绍的很详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-05-05
下面小编就为大家分享一篇C#实现将一个字符转换为整数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
最新评论