vue3数组或对象赋值不更新解决方法示例
更新时间：2023年11月24日 10:16:00 作者：清儿
这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
vue3 使用proxy，对于对象和数组都不能直接整个赋。具体原因：reactive声明的响应式对象被 arr 代理，操作代理对象需要有代理对象的前缀，直接覆盖会丢失响应式。
数组赋值
// 方案1：创建一个响应式对象，对象的属性是数组
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
// 方案2: 使用 ref 函数
const state = ref([])
state.value = [1, 2, 3]
// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])对象赋值
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// 直接赋值检测不到，因为响应式的是它的属性，而不是它自身
// 方法1: 单个赋值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：创建响应式对象
let obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
obj.data = {
name: 'lisi'
age: ''
}以上就是vue3数组或对象赋值不更新解决方法示例的详细内容，更多关于vue3数组对象赋值更新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了vue3使用vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue+elementUI-el-table实现动态显示隐藏列方式
这篇文章主要介绍了vue+elementUI-el-table实现动态显示隐藏列方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
对Vue- 动态元素属性及v-bind和v-model的区别详解
今天小编就为大家分享一篇对Vue- 动态元素属性及v-bind和v-model的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
基于vue-cli3多页面开发apicloud应用的教程详解
这篇文章主要介绍了基于vue-cli3多页面开发apicloud应用，本文采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了vue中将网页打印成pdf实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue watch内部调用methods方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中关于redirect(重定向)初学者的坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Element-ui table中过滤条件变更表格内容的方法
下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05
最近项目中需要在线预览WORD文档,所以给大家总结下,这篇文章主要给大家介绍了关于vue项目如何实现前端预览word与pdf格式文件的相关资料,需要的朋友可以参考下2023-03-03
最新评论