Vue的对象更改检测注意事项

今天碰到一个问题,花了几个小时终于再次在Vue官方教程找到了办法。

教训啊

增删Data中的对象的属性不要这样做—— xx.yy = zz,这样是非响应式的。最好按照Vue官方教程所说那样修改,或者嫌麻烦可以用xx = {yy:zz},前提是你的属性不多可以自己一个个列进去,如果多那最好就采用官方教程那样, xx = Object.assign({},xx,{yy:zz})

数组自然同理,教程也有提到。

如果你是这么做,但是发现“可以修改啊!”。因为你有其他的对象属性发生变化了,触发了重新渲染,上面的做法仅仅是无法响应,但是代码是生效的,一旦触发了重新渲染,效果是一样的。

Vue对象更改检测注意事项

发表评论

电子邮件地址不会被公开。 必填项已用*标注