vue数组实现原理
Vue 数组响应式实现原理
Vue 通过重写数组的原型方法来实现对数组变化的监听。具体实现方式是通过拦截数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse），并在这些方法被调用时触发视图更新。
核心实现步骤
拦截数组原型方法
Vue 创建了一个继承自 Array.prototype 的新对象 arrayMethods，并重写了其中的变异方法。当调用这些方法时，Vue 会先执行原始方法，再通知依赖更新。
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
ob.dep.notify()
return result
})
})代理数组原型
Vue 在初始化数据时，会检查数据是否为数组。如果是数组，则将数组的原型指向 arrayMethods，从而实现对数组方法的拦截。
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
}处理新增元素
对于 push、unshift 和 splice 这些可能新增元素的方法，Vue 会对新增的元素进行响应式处理，确保新元素也是响应式的。
注意事项
- Vue 无法检测通过索引直接设置数组项的变化（如
arr[0] = newValue），应使用Vue.set或arr.splice替代。 - Vue 也无法检测直接修改数组长度的变化（如
arr.length = 0），应使用arr.splice(0)替代。
性能优化
Vue 通过重写数组方法而非使用 Object.defineProperty 监听数组每一项，主要是出于性能考虑。数组可能包含大量元素，逐项监听会带来较大性能开销。
