Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素,换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆的用新数组替换旧数组,不用担心性能问题。
以下变动的数组中,vue是不能检测到的,也不会触发视图更新:
1.通过索引直接设置项, app.book[3] = { ... }
解决方法:Vue.set(app.book,3,{...})
如果是在webpack中,使用组件化的方式,默认没有导入Vue,这时可以使用$set:
this.$set(app.book,3,{...})
2.修改数组长度 , app.book.length = 1
解决方法:app.book.splice(1)
之前做项目的时候,遇到了这个问题,也是在网络上找的方法。今儿看了《vue.js实战》第五章-内置指令里面清晰的写着解决方法,突然领悟到要是一开始接触vue时,就应该耐心的看看书,不至于做项目的时候遇到辣么多问题。(这本书建议初学者看看)