最近在项目开发过程中发现,在我设置了data里数组的值后,视图没有渲染。在代码中打断点调试,看到值已经改变了,但是视图没有渲染,打开VUE-devtools,发现值也没变。按理来说vue data数据中心的数据是双向绑定的,当数据中心的数据发生改变时,视图就会同步更新才对。

后来翻阅了官网教程,看到 基础-列表渲染-数组更新检测 章节有提到,由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

必须用全局方法 Vue.set(vm.items, indexOfItem, newValue) 或 实例方法 vm.$set(vm.items, indexOfItem, newValue) 来触发状态更新。

2.当你修改数组的长度时,例如:vm.items.length = newLength

可以使用 vm.items.splice(newLength) 。

虽然一开始学vue的时候都是看过的知识点,但是开发过程中用的少或者没碰到,就会忽视掉这些问题。因为之前在设置数组的值的同时还设置对象属性的值,vue检测到对象属性值的改变后,重新渲染视图。所以我就错误地认为设置数组的值是可以重新渲染视图的了。

 

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐