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数组对象赋值更新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue脚手架的简单使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要和大家一起探索Vue.js component内容实现,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
本篇文章主要介绍了利用 Vue.js 实现前后端分离的RBAC角色权限管理，非常具有实用价值，需要的朋友可以参考下2017-09-09
今天小编就为大家分享一篇解决VUE双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue配置别名alias在webstorm不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Unocss(原子化css) 使用及vue3 + vite + ts讲解
这篇文章主要介绍了Unocss(原子化css)使用vue3 + vite + ts的方法,简单介绍了Unocss使用及图标库使用，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue获取DOM元素并修改属性或者样式，文中通过两种方法给大家介绍了vue 如何获取并操作DOM元素,需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论