摘要:本文主要通過結合vue官方文件及原始碼,對vue響應式原理進行深入分析。
1.定義
作為vue最獨特的特性,響應式可以說是vue的靈魂了,表面上看就是資料發生變化後,對應的介面會重新渲染,那麼響應式系統的底層細節到底是怎麼一回事呢?
Tips:vue的響應式系統在vue2.0和vue3.0版本中的底層實現有所不同,簡單了來說就是處理屬性的getter/setter部分從Object.defineProperty替換成了Proxy(不過vue3也保留了Object.defineProperty方式用於支援IE瀏覽器)
1.1.vue2.0實現原理
當一個普通的javascript物件傳入vue例項作為data選項時,vue將遍歷data的所有屬性,並使用Object.defineProperty重寫這些屬性的getter/setter方法,這些屬性的getter/setter對於使用者不可見,但是vue可以利用他們來追蹤依賴,在屬性值被訪問和修改時通知變更。每個元件例項都對應一個watcher例項,它會在元件渲染的過程中訪問過的屬性設定為依賴。之後當屬性的setter觸發時,會通知watcher對關聯的元件進行重新渲染。
1.2.vue3.0實現原理
當一個普通的javascript物件傳入vue例項作為data選項時,vue會將其轉化為Proxy。首次渲染後,元件將跟蹤在渲染過程中被訪問的屬性,元件就成了這些屬性的訂閱者。當proxy攔截到set操作時,該屬性將通知所有訂閱了它的元件進行重新渲染。
2.原始碼解析
通過上面的定義可能對於響應式的原理還不夠清楚,接下來通過對vue原始碼的分析進行深入理解。
2.1.vue2.0原始碼實現
在vue2.0中,vue的響應式系統是基於資料攔截+釋出訂閱的模式,包含了四個模組:
- Observer:通過Object.defineProperty攔截data屬性的setter/getter方法,從而使每個屬性都擁有一個Dep,當觸發getter時收集依賴(使用該屬性的watcher),當觸發setter時通知更新;
- Dep:依賴收集器,用於維護依賴data屬性的所有Watcher;
- Watcher:將檢視依賴的屬性繫結到Dep中,當資料修改時觸發setter,呼叫Dep的notify方法,通知所有依賴該屬性的Watcher進行update更新檢視,使屬性值與檢視繫結起來;
- Compile:模板指令解析器,對模板每個元素節點的指令進行掃描解析,根據指令模板替換屬性資料,同時注入Watcher更新資料的回撥方法。
- Observer
import Dep from './dep' import VNode from '../vdom/vnode' import { arrayMethods } from './array' import { def, warn, hasOwn, hasProto, isObject, isPlainObject, isPrimitive, isUndef, isValidArrayIndex, isServerRendering } from '../util/index' const arrayKeys = Object.getOwnPropertyNames(arrayMethods) /** * In some cases we may want to disable observation inside a component's * update computation. */ export let shouldObserve: boolean = true export function toggleObserving (value: boolean) { shouldObserve = value } /** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collect dependencies and dispatch updates. */ 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) { 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]) } } /** * Observe a list of Array items. */ observeArray (items: Array) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } } } // helpers /** * Augment a target Object or Array by intercepting * the prototype chain using __proto__ */ function protoAugment (target, src: Object) { /* eslint-disable no-proto */ target.__proto__ = src /* eslint-enable no-proto */ } /** * Augment a target Object or Array by defining * hidden properties. */ /* istanbul ignore next */ function copyAugment (target: Object, src: Object, keys: Array) { for (let i = 0, l = keys.length; i < l; i++) { const key = keys[i] def(target, key, src[key]) } } /** * Attempt to create an observer instance for a value, * returns the new observer if successfully observed, * or the existing observer if the value already has one. */ 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) { ob = value.__ob__ } else if ( shouldObserve && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value) } if (asRootData && ob) { ob.vmCount++ } return ob } /** * Define a reactive property on an Object. */ export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean ) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set if ((!getter || setter) && arguments.length === 2) { val = obj[key] } let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ 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 if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() } }) } /** * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. */ export function set (target: Array | Object, key: any, val: any): any { if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } if (key in target && !(key in Object.prototype)) { target[key] = val return val } const ob = (target: any).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ' + 'at runtime - declare it upfront in the data option.' ) return val } if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val } /** * Delete a property and trigger change if necessary. */ export function del (target: Array | Object, key: any) { if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.splice(key, 1) return } const ob = (target: any).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid deleting properties on a Vue instance or its root $data ' + '- just set it to null.' ) return } if (!hasOwn(target, key)) { return } delete target[key] if (!ob) { return } ob.dep.notify() } /** * Collect dependencies on array elements when the array is touched, since * we cannot intercept array element access like property getters. */ function dependArray (value: Array) { 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) } } }
總結:Observer通過重寫data上各個屬性的setter/getter方法,對每個屬性都維護一個Dep,用於收集依賴該屬性的所有Watcher,當該屬性觸發setter時,派發更新的通知。
- Dep
import type Watcher from './watcher' import { remove } from '../util/index' import config from '../config' let uid = 0 /** * A dep is an observable that can have multiple * directives subscribing to it. */ export default class Dep { static target: ?Watcher; id: number; subs: Array; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { Dep.target.addDep(this) } } notify () { // stabilize the subscriber list first const subs = this.subs.slice() if (process.env.NODE_ENV !== 'production' && !config.async) { // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort((a, b) => a.id - b.id) } for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } } // The current target watcher being evaluated. // This is globally unique because only one watcher // can be evaluated at a time. Dep.target = null const targetStack = [] export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target } export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] }
總結:Dep一方面用陣列收集與屬性相關的Watcher,另一方面遍歷陣列通知每個Watcher進行update。
- Watcher
import { warn, remove, isObject, parsePath, _Set as Set, handleError, noop } from '../util/index' import { traverse } from './traverse' import { queueWatcher } from './scheduler' import Dep, { pushTarget, popTarget } from './dep' import type { SimpleSet } from '../util/index' let uid = 0 /** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch() api and directives. */ export default class Watcher { vm: Component; expression: string; cb: Function; id: number; deep: boolean; user: boolean; lazy: boolean; sync: boolean; dirty: boolean; active: boolean; deps: Array; newDeps: Array; depIds: SimpleSet; newDepIds: SimpleSet; before: ?Function; getter: Function; value: any; constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean ) { this.vm = vm if (isRenderWatcher) { vm._watcher = this } vm._watchers.push(this) // options if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = !!options.lazy this.sync = !!options.sync this.before = options.before } else { this.deep = this.user = this.lazy = this.sync = false } this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy // for lazy watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.expression = process.env.NODE_ENV !== 'production' ? expOrFn.toString() : '' // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) if (!this.getter) { this.getter = noop process.env.NODE_ENV !== 'production' && warn( `Failed watching path: "${expOrFn}" ` + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ) } } this.value = this.lazy ? undefined : this.get() } /** * Evaluate the getter, and re-collect dependencies. */ get () { pushTarget(this) let value const vm = this.vm try { value = this.getter.call(vm, vm) } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`) } else { throw e } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value) } popTarget() this.cleanupDeps() } return value } /** * Add a dependency to this directive. */ addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) } } } /** * Clean up for dependency collection. */ cleanupDeps () { let i = this.deps.length while (i--) { const dep = this.deps[i] if (!this.newDepIds.has(dep.id)) { dep.removeSub(this) } } let tmp = this.depIds this.depIds = this.newDepIds this.newDepIds = tmp this.newDepIds.clear() tmp = this.deps this.deps = this.newDeps this.newDeps = tmp this.newDeps.length = 0 } /** * Subscriber interface. * Will be called when a dependency changes. */ update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } } /** * Scheduler job interface. * Will be called by the scheduler. */ run () { if (this.active) { const value = this.get() if ( value !== this.value || // Deep watchers and watchers on Object/Arrays should fire even // when the value is the same, because the value may // have mutated. isObject(value) || this.deep ) { // set new value const oldValue = this.value this.value = value if (this.user) { try { this.cb.call(this.vm, value, oldValue) } catch (e) { handleError(e, this.vm, `callback for watcher "${this.expression}"`) } } else { this.cb.call(this.vm, value, oldValue) } } } } /** * Evaluate the value of the watcher. * This only gets called for lazy watchers. */ evaluate () { this.value = this.get() this.dirty = false } /** * Depend on all deps collected by this watcher. */ depend () { let i = this.deps.length while (i--) { this.deps[i].depend() } } /** * Remove self from all dependencies' subscriber list. */ teardown () { if (this.active) { // remove self from vm's watcher list // this is a somewhat expensive operation so we skip it // if the vm is being destroyed. if (!this.vm._isBeingDestroyed) { remove(this.vm._watchers, this) } let i = this.deps.length while (i--) { this.deps[i].removeSub(this) } this.active = false } } }
總結:Watcher是一個依賴於資料的訂閱者,當資料發生變化時,Dep呼叫notify方法,觸發這些Watcher的update方法。
- Compile
class Complie { constructor(el, vm) { this.el = this.isElementNode(el) ? el : document.querySelector(el) this.vm = vm if (this.el) { // 1.獲取文件碎片物件,放入記憶體中,會減少頁面的迴流和重繪 let fragment = this.nodeFragment(this.el) // 2.編譯模板 this.complie(fragment) // 3.追加子元素到根元素上 this.el.appendChild(fragment) } } isElementNode(node) { return node.nodeType === 1 } nodeFragment(el) { el.firstChild // 建立一個記憶體碎片物件 const fragment = document.createDocumentFragment() let firstChild while ((firstChild = el.firstChild)) { fragment.appendChild(firstChild) } return fragment } // 遍歷獲取並區分元素節點還是文字節點,然後進行相應的處理 complie(fragment) { // 1.獲取到每個子節點 const childNodes = fragment.childNodes childNodes.forEach(child => { if (this.isElementNode(child)) { // 是元素節點 // 編譯元素節點 this.complieElement(child) } else { // 文字節點 // 編譯文字節點 this.complieText(child) } if (child.childNodes && child.childNodes.length) { this.complie(child) } }) } // 編譯元素 complieElement(node) { const attributes = node.attributes Array.from(attributes).forEach(attr => { const { name, value } = attr if (this.isDirective(name)) { // 表明是一個指令 const [, dirctive] = name.split('-') const [dirName, eventName] = dirctive.split(':') // text html model on /* node(整個節點) value(msg) this.vm(相當於整個 MVue例項物件) eventName(v-on:click='btnClick') 中的事件名btnClick */ // 更新資料 資料驅動檢視 compileUtil[dirName](node, value, this.vm, eventName) // 刪除有指令的標籤上的屬性 node.removeAttribute('v-' + dirctive) } else if (this.isEventName(name)) { // @click='handleClick' let [, eventName] = name.split('@') compileUtil['on'](node, value, this.vm, eventName) } }) } isEventName(eventName) { return eventName.startsWith('@') } // 檢測字串是否以 v- 開頭 isDirective(attrName) { return attrName.startsWith('v-') } // 編譯文字 complieText(node) { const content = node.textContent if (/\{\{(.+?)\}\}/.test(content)) { compileUtil['text'](node, content, this.vm) } } }