【VUE】Vue2通过数组下标更改数组视图为什么不会更新？

• 因为 Vue 2 使用的是 Object.defineProperty()
  对数组进行响应式处理，在对一个对象进行响应式处理时，会遍历对象的所有属性，对其进行劫持，当属性值变化时则会触发视图更新。
• 但是，Object.defineProperty()
  只能够劫持到数组索引的读取与更改操作，而不能够劫持到数组长度变化、数组变异方法等其他的数组操作。
• 但是，Vue2 对数组的变异方法进行了重写，实现了视图更新的功能。
• 因此，当通过数组下标更改数组或者使用数组的length属性缩短数组长度时，Vue2中并不能侦测到以下数组变动。

在 Vue 2.x 中，当通过数组下标更改一个数组的数据时，并不会导致组件重新渲染。
这是因为 Vue 2 使用的是 Object.defineProperty() 对数组进行响应式处理。具体来说，Vue 2 在对一个对象进行响应式处理时，会遍历对象的所有属性，对其进行劫持，当属性值变化时则会触发视图更新。

但是，Object.defineProperty() 只能够劫持到数组索引的读取与更改操作，而不能够劫持到数组长度变化、数组变异方法等其他的数组操作。

但是，Vue2 对数组的变异方法进行了重写，实现了视图更新的功能。

因此，Vue 并不能侦测到以下数组变动：

• 当通过数组下标直接更改数组中某一项时，例如 arr[1] = ‘new value’；
• 当使用数组的 length 属性缩短数组长度时，例如 arr.length = 2。

这些情况下，Vue 并不知道具体哪个元素发生了变化以及该如何更新视图，从而无法实现精确的 DOM 操作，需要手动使用 Vue 提供的变异方法来触发视图更新，例如：

• 通过 Vue.set 或 vm.$set 方法设置指定下标的值；
• 通过 splice 方法在指定下标位置移除或添加元素。

例如，在 Vue 中使用 vm.$set 方法来更新数组元素：

this.$set(this.items, index, newValue);

或者通过 splice 方法来更新数组元素：

this.items.splice(index, 1, newValue);

这样就可以在更新数组元素时同步更新组件的视图了。

原文地址：https://blog.csdn.net/qq_22639647/article/details/142854732

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！