关于Vue数组,对象数据变化无法更新到视图问题

问题原因:Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

数组详解
数组数据变动,使用某些方法操作数组,变动数据时,有些方法无法被vue监测
push(),pop(),splice(),sort(),reverse()可被vue检测到
filter(), concat(), slice()。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组

解决方法
一、使用官方推荐
this. s e t ( a r r ∣ o b j , i n d e x ∣ k e y , v a l u e ) t h i s . set( arr | obj , index | key, value ) this. set(arrobj,indexkey,value)this.delete(arr | obj , index | key)
二、vue多层循环,动态数据改变后渲染很慢或者不渲染
尝试在方法第一行加上

this.$forceUpdate();

三、
尝试使用watch监听或者computed来处理
四、Object.assgin()操作对象可以
五、this. n e x t T i c k ( c a l l b a c k ) 这 个 函 数 可 以 获 取 D o m 更 新 后 的 数 据 , 因 为 D o m 更 新 是 异 步 的 , 异 步 函 数 执 行 完 成 之 后 就 会 调 用 nextTick(callback) 这个函数可以获取Dom更新后的数据,因为Dom更新是异步的,异步函数执行完成之后就会调用 nextTick(callback)DomDomnextTick()

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值