vue3中reactive不能直接赋值的解决方案
更新时间：2022年05月25日 09:37:48 作者：前端阿彬
这篇文章主要介绍了vue3中reactive不能直接赋值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3 reactive不能直接赋值
最近比较忙，都没什么时间学习了。
在vue3里，ref和reacitve都可以定义响应式数据，但是两者有所不同。在使用reactive定义复杂结构的响应式数据时，如果你要对其赋值，会丢失其响应性。然后赋值是我们经常进行的操作，那么该怎么解决呢？
方法
1. 改为ref定义
const arr= ref([]) arr.value = [1, 2, 3]
2. push新增数据
const arr = reactive([]) arr.push(...[1, 2, 3])
3.再封装一层数据（推荐！）
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]但是这样的话在html模板里，使用数据就得state.arr
所以我们可以用解构将它return出来
但是reactive解构出来的数据会丢失响应性
所以再用torefs()方法为它们添加响应性
最终为：
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
return{
...toRefs(state),
}vue3 reactive赋值不响应
看了好多方法，先都存着。
（1）多嵌套一层
setup(props) {
//a赋值的时候多套一层对象值赋到a的属性a上
let a=reactive({a:{id:1,name:'小明'}})
Object
function fn(){
//改值时就可以直接给a.a赋值了
a.a={id:2,name:'小黄'}
console.log(a);
}
return {
fn,a
}
}（2）使用ref
const data= ref([]) data.value = [1, 2, 3]
（3）用obeject.assign
let a=reactive({id:1,name:'小明'})
function fn(){
Object.assign(a,{id:2,name:'大明'})
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决vue项目axios每次请求session不一致的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vantUI 获得piker选中值的自定义ID操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在vue开发中,难免遇到各种表单校验,本文主要介绍了Vue中常用的rules校验规则的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue cli 3.0 搭建项目的图文教程，本文通过图片文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于vue3中如何使用d3.js绘制流程图的相关资料,D3.js是由javaScript语言编写绘图库,其原理是通过调用一系列内置函数,生成SVG,并在网页渲染,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在本篇内容里小编给大家整理了关于Vue.js中的extend绑定节点并显示的方法以及相关知识点，需要的朋友们学习下。2019-06-06
这篇文章主要为大家介绍了Vant中Popover气泡弹出框位置错乱问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了基于vue实现图片验证码倒计时60s功能,本文通过截图实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论