Vue源碼解析之數組變異的實現

var vm = new Vue({
 data () {
 return {
 obj: {
 a: 1
 }
 }
 }
})
// `vm.obj.a` 現在是響應式的

vm.obj.b = 2
// `vm.obj.b` 不是響應式的

var vm = new Vue({
 data () {
 return {
 items: ['a', 'b', 'c']
 }
 }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

function A () {
 console.log('調用了函數A')
}

const nativeA = A
A = function () {
 console.log('HelloWorld')
 nativeA()
}

// 變異方法名稱
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

const arrayProto = Array.prototype
// 繼承原有數組的方法
const arrayMethods = Object.create(arrayProto)

mutationMethods.forEach(method => {
 // 緩存原生數組方法
 const original = arrayProto[method]
 arrayMethods[method] = function (...args) {
 const result = original.apply(this, args)
 
 console.log('執行響應式功能')
 
 return result
 }
})

let arr = []
// 通過隱式原型繼承arrayMethods
arr.__proto__ = arrayMethods

// 執行變異后方法
arr.push(1)

constructor (value: any) {
 this.value = value
 this.dep = new Dep()
 this.vmCount = 0
 def(value, '__ob__', this)
 // 檢測是否是數組
 if (Array.isArray(value)) {
 // 能力檢測
 const augment = hasProto
 ? protoAugment
 : copyAugment
 // 通過能力檢測的結果選擇不同方式進行數組劫持
 augment(value, arrayMethods, arrayKeys)
 // 對數組的響應式處理
 this.observeArray(value)
 } else {
 this.walk(value)
 }
}

// 能力檢測
const augment = hasProto
? protoAugment
: copyAugment
// 通過能力檢測的結果選擇不同方式進行數組劫持
augment(value, arrayMethods, arrayKeys)
// 對數組的響應式處理，很本文關系不大，略過
this.observeArray(value)

export const hasProto = '__proto__' in {}

function protoAugment (target, src: Object, keys: any) {
 /* eslint-disable no-proto */
 target.__proto__ = src
 /* eslint-enable no-proto */
}

function copyAugment (target: Object, src: Object, keys: Array<string>) {
 for (let i = 0, l = keys.length; i < l; i++) {
 const key = keys[i]
 // Object.defineProperty的封裝
 def(target, key, src[key])
 }
}

// 獲取變異數組中所有自身屬性的屬性名
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

import { def } from '../util/index'

// 緩存數組原型
const arrayProto = Array.prototype
// 實現 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 需要進行功能拓展的方法
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
 // cache original 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)
 // notify change
 ob.dep.notify()
 // 返回原生數組方法的執行結果
 return result
 })
})