Vue原始碼學習: 關於對Array的資料偵聽
摘要：
我們都知道Vue的響應式是通過Object.defineProperty來進行資料劫持。但是那是針對Object型別可以實現, 如果是陣列呢? 通過set/get方式是不行的。
但是Vue作者使用了一個方式來實現Array型別的監測: 攔截器。
核心思想
通過建立一個攔截器來覆蓋陣...
我們都知道Vue的響應式是通過Object.defineProperty來進行資料劫持。但是那是針對Object型別可以實現, 如果是陣列呢? 通過set/get方式是不行的。
但是Vue作者使用了一個方式來實現Array型別的監測: 攔截器。
核心思想
通過建立一個攔截器來覆蓋陣列本身的原型物件Array.prototype。
攔截器
通過檢視Vue原始碼路徑vue/src/core/observer/array.js。
/**
* Vue對陣列的變化偵測
* 思想: 通過一個攔截器來覆蓋Array.prototype。
* 攔截器其實就是一個Object, 它的屬性與Array.prototype一樣。 只是對陣列的變異方法進行了處理。
*/
function def (obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
})
}
// 陣列原型物件
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) {
// 返回的value還是通過陣列原型方法本身執行的結果
const result = original.apply(this, args)
// 每個value在被observer()時候都會打上一個__ob__屬性
const ob = this.__ob__
// 儲存呼叫執行變異陣列方法導致陣列本身值改變的陣列，主要指的是原始陣列增加的那部分(需要重新Observer)
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
// 重新Observe新增加的陣列元素
if (inserted) ob.observeArray(inserted)
// 傳送變化通知
ob.dep.notify()
return result
})
})
複製程式碼
關於Vue什麼時候對data屬性進行Observer
如果熟悉Vue原始碼的童鞋應該很快能找到Vue的入口檔案vue/src/core/instance/index.js。
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
// 給原型繫結代理屬性$props, $data
// 給Vue原型繫結三個例項方法: vm.$watch，vm.$set，vm.$delete
stateMixin(Vue)
// 給Vue原型繫結事件相關的例項方法: vm.$on, vm.$once ,vm.$off , vm.$emit
eventsMixin(Vue)
// 給Vue原型繫結生命週期相關的例項方法: vm.$forceUpdate, vm.destroy, 以及私有方法_update
lifecycleMixin(Vue)
// 給Vue原型繫結生命週期相關的例項方法: vm.$nextTick, 以及私有方法_render, 以及一堆工具方法
renderMixin(Vue)
export default Vue
複製程式碼
this.init()
原始碼路徑: vue/src/core/instance/init.js。
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
// 當前例項
const vm: Component = this
// a uid
// 例項唯一標識
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
// 開發模式, 開啟Vue效能檢測和支援 performance.mark API 的瀏覽器上。
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
// 處於元件初始化階段開始打點
mark(startTag)
}
// a flag to avoid this being observed
// 標識為一個Vue例項
vm._isVue = true
// merge options
// 把我們傳入的optionsMerge到$options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
// 初始化生命週期
initLifecycle(vm)
// 初始化事件中心
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// 初始化State
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
// 掛載
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}
複製程式碼
initState()
原始碼路徑:vue/src/core/instance/state.js。
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
複製程式碼
這個時候你會發現observe出現了。
observe
原始碼路徑: vue/src/core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
// value已經是一個響應式資料就不再建立Observe例項, 避免重複偵聽
ob = value.__ob__
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
// 出現目標, 建立一個Observer例項
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
複製程式碼
使用攔截器的時機
Vue的響應式系統中有個Observe類。原始碼路徑:vue/src/core/observer/index.js。
// can we use __proto__?
export const hasProto = '__proto__' in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
function protoAugment (target, src: Object) {
/* eslint-disable no-proto */
target.__proto__ = src
/* eslint-enable no-proto */
}
function copyAugment (target: Object, src: Object, keys: Array<string>) {
// target: 需要被Observe的物件
// src: 陣列代理原型物件
// keys: const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
// keys: 陣列代理原型物件上的幾個編譯方法名
// const methodsToPatch = [
//'push',
//'pop',
//'shift',
//'unshift',
//'splice',
//'sort',
//'reverse'
// ]
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
//
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
// 如果是陣列
if (Array.isArray(value)) {
if (hasProto) {
// 如果支援__proto__屬性(非標屬性, 大多數瀏覽器支援): 直接把原型指向代理原型物件
protoAugment(value, arrayMethods)
} else {
// 不支援就在陣列例項上掛載被加工處理過的同名的變異方法(且不可列舉)來進行原型物件方法攔截
// 當你訪問一個物件的方法時候, 只有當自身不存在時候才會去原型物件上查詢
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}
}
/**
* Walk through all properties and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* 遍歷陣列每一項來進行偵聽變化,即每個元素執行一遍Observer()
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
複製程式碼
如何收集依賴
Vue裡面真正做資料響應式處理的是defineReactive()。 defineReactive方法就是把物件的資料屬性轉為訪問器屬性, 即為資料屬性設定get/set。
function dependArray (value: Array<any>) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// dep在訪問器屬性中閉包使用
// 每一個數據欄位都通過閉包引用著屬於自己的 dep 常量
// 每個欄位的Dep物件都被用來收集那些屬於對應欄位的依賴。
const dep = new Dep()
// 獲取該欄位可能已有的屬性描述物件
const property = Object.getOwnPropertyDescriptor(obj, key)
// 邊界情況處理： 一個不可配置的屬性是不能使用也沒必要使用 Object.defineProperty 改變其屬性定義的。
if (property && property.configurable === false) {
return
}
// 由於一個物件的屬性很可能已經是一個訪問器屬性了，所以該屬性很可能已經存在 get 或 set 方法
// 如果接下來會使用 Object.defineProperty 函式重新定義屬性的 setter/getter
// 這會導致屬性原有的 set 和 get 方法被覆蓋，所以要將屬性原有的 setter/getter 快取
const getter = property && property.get
const setter = property && property.set
// 邊界情況處理
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
// 預設就是深度觀測，引用子屬性的__ob__
// 為Vue.set 或 Vue.delete 方法提供觸發依賴。
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 如果 getter 存在那麼直接呼叫該函式，並以該函式的返回值作為屬性的值，保證屬性的原有讀取操作正常運作
// 如果 getter 不存在則使用 val 作為屬性的值
const value = getter ? getter.call(obj) : val
// Dep.target的值是在對Watch例項化時候賦值的
if (Dep.target) {
// 開始收集依賴到dep
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
// 呼叫 dependArray 函式逐個觸發陣列每個元素的依賴收集
dependArray(value)
}
}
}
// 正確地返回屬性值。
return value
},
set: function reactiveSetter (newVal) {
// 獲取原來的值
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
// 比較新舊值是否相等, 考慮NaN情況
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
// 如果資料之前有setter, 那麼應該繼續使用該函式來設定屬性的值
if (setter) {
setter.call(obj, newVal)
} else {
// 賦新值
val = newVal
}
// 由於屬性被設定了新的值，那麼假如我們為屬性設定的新值是一個數組或者純物件，
// 那麼該陣列或純物件是未被觀測的，所以需要對新值進行觀測
childOb = !shallow && observe(newVal)
// 通知dep中的watcher更新
dep.notify()
}
})
}
複製程式碼
儲存陣列依賴的列表
我們為什麼需要把依賴存在Observer例項上。 即
export class Observer {
constructor (value: any) {
...
this.dep = new Dep()
}
}
複製程式碼
首先我們需要在getter裡面訪問到Observer例項
// 即上述的
let childOb = !shallow && observe(val)
...
if (childOb) {
// 呼叫Observer例項上dep的depend()方法收集依賴
childOb.dep.depend()
if (Array.isArray(value)) {
// 呼叫 dependArray 函式逐個觸發陣列每個元素的依賴收集
dependArray(value)
}
}
複製程式碼
另外我們在前面提到的攔截器中要使用Observer例項。
methodsToPatch.forEach(function (method) {
...
// this表示當前被操作的資料
// 但是__ob__怎麼來的?
const ob = this.__ob__
...
// 重新Observe新增加的陣列元素
if (inserted) ob.observeArray(inserted)
// 傳送變化通知
ob.dep.notify()
...
})
複製程式碼
思考上述的this.__ob__屬性來自哪裡?
export class Observer {
constructor () {
...
this.dep = new Dep()
// 在vue上新增一個不可列舉的__ob__屬性, 這個屬性的值就是Observer例項
// 因此我們就可以通過陣列資料__ob__獲取Observer例項
// 進而獲取__ob__上的dep
def(value, '__ob__', this)
...
}
}
複製程式碼
牢記所有的屬性一旦被偵測了都會被打上一個__ob__的標記, 即表示是響應式資料。