关于Vue数组，对象数据变化无法更新到视图问题
问题原因：Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。数组详解数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测push()，pop()，splice()，sort()，reverse()可被vue检测到filter(), concat()
问题原因：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(arr∣obj,index∣key,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)这个函数可以获取Dom更新后的数据，因为Dom更新是异步的，异步函数执行完成之后就会调用nextTick()
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)