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数组对象赋值更新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了React Diff算法不采用Vue双端对比算法原因详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue ElementUI级联选择器回显问题解决，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API，可以轻松地实现路由功能，并支持路由参数、查询参数、命名路由、嵌套路由等功能，可以满足不同应用程序的需求，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了如何实现Vue前端分页和后端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
vue2中的el-select组件数据太多,如何实现滚动加载数据效果
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
vue router总结 $router和$route及router与 router与route区别
这篇文章主要介绍了vue router总结 $router和$route及router与 router与route区别，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下2024-05-05
defineProps宏函数不需要从vue中import导入的原因解析
这篇文章主要介绍了defineProps宏函数不需要从vue中import导入的原因解析,本文给大家介绍的非常详细,需要的朋友可以参考下2024-07-07
最新评论