Vue 2.0 在检测数组变化时,由于 JavaScript 的限制(Object.defineProperty
不能直接用于数组元素),它采用了特殊的策略来跟踪数组的变更。以下是 Vue 2.0 检测数组变化的主要方法:
-
数组方法重写:
Vue 重写了数组的一些方法,如push
、pop
、shift
、unshift
、splice
、sort
和reverse
。当这些方法被调用时,Vue 会检测到数组的变更,并触发视图更新。这是通过把 Vue 的实例的
_data
对象上的数组转换为原型链上的方法实现的。因此,当你调用如this.items.push(newItem)
时,实际上调用的是 Vue 重写后的方法,而不是原生的数组方法。 -
使用
$set
方法:
对于直接通过索引修改数组元素或修改数组长度的情况,Vue 无法检测到这些变更。因此,Vue 提供了一个全局方法Vue.set
(在组件实例中可以通过this.$set
访问)来确保这些变更能够被检测到。例如:
this