Vue给对象添加新属性未触发页面渲染

本文记录了一个在使用Vue.js过程中遇到的小问题:直接给Vue对象添加新属性无法正确更新视图的状态。通过使用Vue.set方法成功解决了该问题。

做项目过程中踩得一个小坑,写个博客记录一下

Vue给对象添加新属性,我开始是直接object.属性=‘默认值’,结果用它来控制状态控制不了,值是在变,但是不起作用,想了用class来做吧,但是这个奇葩的问题总要解决啊,于是乎,想到之前做的demo,回去翻看了一下,额。。。。

用Vue.set(Object,'属性名',默认值)这样设定就好了

quotas.forEach(function (quotadata) {
              Vue.set(quotadata, 'yAxisIndex', 0)
            })

这样就木有问题了,这个博客有点简陋,后面我会整理一下,也可能不会,毕竟我很懒。。。。。。。。。。关键是问题解决了,太晚了,码完这一点就休息了

### Vue3 中动态添加对象属性并保持响应式的解决方案 在 Vue3 的 `reactive` 方法中,当通过 JavaScript 动态向一个由 `reactive` 创建的 Proxy 对象添加属性时,默认情况下这些增加的属性并不会自动成为响应式的一部分[^1]。这是因为 Vue3 使用的是基于 ES6 Proxy 实现的响应式机制,在初始化阶段只会追踪已经存在的属性。 如果需要让后续动态添加属性也具有响应性,则可以通过以下方法实现: #### 解决方案一:使用 `Vue.set` 或其等价方式 虽然 Vue3 不再提供全局 API 如 `Vue.set` 和 `Vue.delete`,但在内部仍然支持类似的逻辑来手动触发响应式更新。对于 `reactive` 创建的对象来说,可以直接赋值即可完成响应式效果(前提是该对象已经被代理)。因此无需额外操作,直接修改或增加属性通常会生效。 ```javascript import { reactive } from 'vue'; const state = reactive({ existingProperty: 'initial value' }); // 正确的方式 - 属性也会被检测到变化 state.newProperty = 'dynamic value'; console.log(state.newProperty); // 输出 dynamic value 并且视图应该重渲染 ``` 但是需要注意某些特殊情况下的兼容性和浏览器环境差异可能导致失败的情况发生[^2]。 #### 解决方案二:先定义占位符后再更改 另一种更稳妥的办法是在最初声明对象的时候就预留好将来可能会使用的字段名作为 undefined 或 null 值存在其中;这样做的好处是可以确保所有的潜在键都被纳入到了观察范围之内从而避免遗漏任何必要的监听项。 ```javascript const initialState = { knownKey: '', unknownYetButWillBeUsedLater: null // 提前准备知但来需要用到的关键字 }; const safeState = reactive(initialState); safeState.unknownYetButWillBeUsedLater = true; ``` 这种方法能够有效防止因后期扩展而导致的数据绑定失效问题[^3]。 #### 注意事项 尽管如此,还是建议开发者尽量减少运行时期间频繁改变结构复杂度较高的大型嵌套数据模型的行为模式,因为这不仅增加了维护成本还容易引发难以预料的问题。相反地,应当提前规划清楚所需管理的状态集合内容及其关系网路以便于构建更加健壮的应用程序架构设计思路。 ```javascript import { reactive } from 'vue'; function createState() { return reactive({ name: "", age: 0, address: {} // 如果预计会有地址信息则预先设定为空对象形式 }); } const user = createState(); user.address.city = "Shanghai"; // 这样做一般不会有太大风险 ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值