vue3中reactive不能直接赋值的解决方案
短信预约 -IT技能 免费直播动态提醒
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:'大明'})
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
