vue的数组实现原理
Vue 数组响应式原理
Vue 通过重写数组的原型方法来实现对数组变化的监听。具体实现方式是利用 JavaScript 的原型链机制，创建一个新的数组原型对象，并覆盖其中能够修改原数组的方法。
重写数组方法
Vue 会拦截以下数组方法：
pushpopshiftunshiftsplicesortreverse
这些方法被重写后，会在执行原有逻辑的同时触发依赖更新。
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 在处理数据响应式时，会对数组进行特殊处理：
class Observer {
constructor(value) {
if (Array.isArray(value)) {
value.__proto__ = arrayMethods
this.observeArray(value)
} else {
this.walk(value)
}
}
observeArray(items) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}注意事项
直接通过索引修改数组元素或修改数组长度不会触发响应式更新：
// 不会触发视图更新
this.items[index] = newValue
this.items.length = newLength应该使用 Vue 提供的 set 方法或数组的变异方法：
// 正确方式
this.$set(this.items, index, newValue)
this.items.splice(index, 1, newValue)深层数组监听
对于嵌套数组，Vue 会递归地为每个数组元素创建响应式绑定：
function observeArray(items) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}这种实现方式确保了数组操作能够触发视图更新，同时保持了 JavaScript 数组原有的行为特性。
