前言

響應式原理作為 Vue 的核心，使用數據劫持實現數據驅動視圖。在面試中是經?？疾榈闹R點，也是面試加分項。

本文將會循序漸進的解析響應式原理的工作流程，主要以下面結構進行：

分析主要成員，了解它們有助于理解流程 將流程拆分，理解其中的作用 結合以上的點，理解整體流程

文章稍長，但大部分是代碼實現，還請耐心觀看。為了方便理解原理，文中的代碼會進行簡化，如果可以請對照源碼學習。

主要成員

響應式原理中，Observe、Watcher、Dep這三個類是構成完整原理的主要成員。

Observe，響應式原理的入口，根據數據類型處理觀測邏輯 Watcher，用于執行更新渲染，組件會擁有一個渲染Watcher，我們常說的收集依賴，就是收集 Watcher Dep，依賴收集器，屬性都會有一個Dep，方便發生變化時能夠找到對應的依賴觸發更新

下面來看看這些類的實現，包含哪些主要屬性和方法。

Observe：我會對數據進行觀測

溫馨提示：代碼里的序號對應代碼塊下面序號的講解

// 源碼位置：/src/core/observer/index.jsclass Observe { constructor(data) { this.dep = new Dep() // 1 def(data, ’__ob__’, this) if (Array.isArray(data)) { // 2 protoAugment(data, arrayMethods) // 3 this.observeArray(data) } else { // 4 this.walk(data) } } walk(data) { Object.keys(data).forEach(key => { defineReactive(data, key, data[key]) }) } observeArray(data) { data.forEach(item => { observe(item) }) }} 為觀測的屬性添加 __ob__ 屬性，它的值等于 this，即當前 Observe 的實例 為數組添加重寫的數組方法，比如：push、unshift、splice 等方法，重寫目的是在調用這些方法時，進行更新渲染 觀測數組內的數據，observe 內部會調用 new Observe，形成遞歸觀測 觀測對象數據，defineReactive 為數據定義 get 和 set ，即數據劫持

Dep：我會為數據收集依賴

// 源碼位置：/src/core/observer/dep.jslet id = 0class Dep{ constructor() { this.id = ++id // dep 唯一標識 this.subs = [] // 存儲 Watcher } // 1 depend() { Dep.target.addDep(this) } // 2 addSub(watcher) { this.subs.push(watcher) } // 3 notify() { this.subs.forEach(watcher => watcher.update()) }}// 4Dep.target = nullexport function pushTarget(watcher) { Dep.target = watcher} export function popTarget(){ Dep.target = null}export default Dep 據收集依賴的主要方法，Dep.target 是一個 watcher 實例 添加 watcher 到數組中，也就是添加依賴 屬性在變化時會調用 notify 方法，通知每一個依賴進行更新 Dep.target 用來記錄 watcher 實例，是全局唯一的，主要作用是為了在收集依賴的過程中找到相應的 watcher

pushTarget 和 popTarget 這兩個方法顯而易見是用來設置 Dep.target的。Dep.target 也是一個關鍵點，這個概念可能初次查看源碼會有些難以理解，在后面的流程中，會詳細講解它的作用，需要注意這部分的內容。

Watcher：我會觸發視圖更新

// 源碼位置：/src/core/observer/watcher.jslet id = 0export class Watcher { constructor(vm, exprOrFn, cb, options){ this.id = ++id // watcher 唯一標識 this.vm = vm this.cb = cb this.options = options // 1 this.getter = exprOrFn this.deps = [] this.depIds = new Set() this.get() } run() { this.get() } get() { pushTarget(this) this.getter() popTarget(this) } // 2 addDep(dep) { // 防止重復添加 dep if (!this.depIds.has(dep.id)) { this.depIds.add(dep.id) this.deps.push(dep) dep.addSub(this) } } // 3 update() { queueWatcher(this) }} this.getter 存儲的是更新視圖的函數 watcher 存儲 dep，同時 dep 也存儲 watcher，進行雙向記錄 觸發更新，queueWatcher 是為了進行異步更新，異步更新會調用 run 方法進行更新頁面

響應式原理流程

對于以上這些成員具有的功能，我們都有大概的了解。下面結合它們，來看看這些功能是如何在響應式原理流程中工作的。

數據觀測

數據在初始化時會通過 observe 方法來創建 Observe 類

// 源碼位置：/src/core/observer/index.jsexport function observe(data) { // 1 if (!isObject(data)) { return } let ob; // 2 if (data.hasOwnProperty(’__ob__’) && data.__ob__ instanceof Observe) { ob = data.__ob__ } else { // 3 ob = new Observe(data) } return ob}

在初始化時，observe 拿到的 data 就是我們在 data 函數內返回的對象。

observe 函數只對 object 類型數據進行觀測 觀測過的數據都會被添加上 __ob__ 屬性，通過判斷該屬性是否存在，防止重復觀測 創建 Observe 類，開始處理觀測邏輯

對象觀測

進入 Observe 內部，由于初始化的數據是一個對象，所以會調用 walk 方法:

walk(data) { Object.keys(data).forEach(key => { defineReactive(data, key, data[key]) })}

defineReactive 方法內部使用 Object.defineProperty 對數據進行劫持，是實現響應式原理最核心的地方。

function defineReactive(obj, key, value) { // 1 let childOb = observe(value) // 2 const dep = new Dep() Object.defineProperty(obj, key, { get() { if (Dep.target) { // 3 dep.depend() if (childOb) { childOb.dep.depend() } } return value }, set(newVal) { if (newVal === value) { return } value = newVal // 4 childOb = observe(newVal) // 5 dep.notify() return value } })} 由于值可能是對象類型，這里需要調用 observe 進行遞歸觀測 這里的 dep 就是上面講到的每一個屬性都會有一個 dep，它是作為一個閉包的存在，負責收集依賴和通知更新 在初始化時，Dep.target 是組件的渲染 watcher，這里 dep.depend 收集的依賴就是這個 watcher，childOb.dep.depend 主要是為數組收集依賴 設置的新值可能是對象類型，需要對新值進行觀測 值發生改變，dep.notify 通知 watcher 更新，這是我們改變數據后能夠實時更新頁面的觸發點

通過 Object.defineProperty 對屬性定義后，屬性的獲取觸發 get 回調，屬性的設置觸發 set 回調，實現響應式更新。

通過上面的邏輯，也能得出為什么 Vue3.0 要使用 Proxy 代替 Object.defineProperty 了。Object.defineProperty 只能對單個屬性進行定義，如果屬性是對象類型，還需要遞歸去觀測，會很消耗性能。而 Proxy 是代理整個對象，只要屬性發生變化就會觸發回調。

數組觀測

對于數組類型觀測，會調用 observeArray 方法：

observeArray(data) { data.forEach(item => { observe(item) })}

與對象不同，它執行 observe 對數組內的對象類型進行觀測，并沒有對數組的每一項進行 Object.defineProperty 的定義，也就是說數組內的項是沒有 dep 的。

所以，我們通過數組索引對項進行修改時，是不會觸發更新的。但可以通過 this.$set 來修改觸發更新。那么問題來了，為什么 Vue 要這樣設計？

結合實際場景，數組中通常會存放多項數據，比如列表數據。這樣觀測起來會消耗性能。還有一點原因，一般修改數組元素很少會直接通過索引將整個元素替換掉。例如：

export default { data() { return { list: [{id: 1, name: ’Jack’},{id: 2, name: ’Mike’} ] } }, cretaed() { // 如果想要修改 name 的值，一般是這樣使用 this.list[0].name = ’JOJO’ // 而不是以下這樣 // this.list[0] = {id:1, name: ’JOJO’} // 當然你可以這樣更新 // this.$set(this.list, ’0’, {id:1, name: ’JOJO’}) }}

數組方法重寫

當數組元素新增或刪除，視圖會隨之更新。這并不是理所當然的，而是 Vue 內部重寫了數組的方法，調用這些方法時，數組會更新檢測，觸發視圖更新。這些方法包括：

push() pop() shift() unshift() splice() sort() reverse()

回到 Observe 的類中，當觀測的數據類型為數組時，會調用 protoAugment 方法。

if (Array.isArray(data)) { protoAugment(data, arrayMethods) // 觀察數組 this.observeArray(data)} else { // 觀察對象 this.walk(data)}

這個方法里把數組原型替換為 arrayMethods ，當調用改變數組的方法時，優先使用重寫后的方法。

function protoAugment(data, arrayMethods) { data.__proto__ = arrayMethods}

接下來看看 arrayMethods 是如何實現的:

// 源碼位置：/src/core/observer/array.js// 1let arrayProto = Array.prototype// 2export let arrayMethods = Object.create(arrayProto)let methods = [ ’push’, ’pop’, ’shift’, ’unshift’, ’reverse’, ’sort’, ’splice’]methods.forEach(method => { arrayMethods[method] = function(...args) { // 3 let res = arrayProto[method].apply(this, args) let ob = this.__ob__ let inserted = ’’ switch(method){ case ’push’: case ’unshift’: inserted = args break; case ’splice’: inserted = args.slice(2) break; } // 4 inserted && ob.observeArray(inserted) // 5 ob.dep.notify() return res }}) 將數組的原型保存起來，因為重寫的數組方法里，還是需要調用原生數組方法的 arrayMethods 是一個對象，用于保存重寫的方法，這里使用 Object.create(arrayProto) 創建對象是為了使用者在調用非重寫方法時，能夠繼承使用原生的方法 調用原生方法，存儲返回值，用于設置重寫函數的返回值 inserted 存儲新增的值，若 inserted 存在，對新值進行觀測 ob.dep.notify 觸發視圖更新

依賴收集

依賴收集是視圖更新的前提，也是響應式原理中至關重要的環節。

偽代碼流程

為了方便理解，這里寫一段偽代碼，大概了解依賴收集的流程：

// data 數據let data = { name: ’joe’}// 渲染watcherlet watcher = { run() { dep.tagret = watcher document.write(data.name) }}// deplet dep = [] // 存儲依賴 dep.tagret = null // 記錄 watcher// 數據劫持Object.defineProperty(data, ’name’, { get(){ // 收集依賴 dep.push(dep.tagret) }, set(newVal){ data.name = newVal dep.forEach(watcher => { watcher.run() }) }})

初始化：

首先會對 name 屬性定義 get 和 set 然后初始化會執行一次 watcher.run 渲染頁面 這時候獲取 data.name，觸發 get 函數收集依賴。

更新：

修改 data.name，觸發 set 函數，調用 run 更新視圖。

真正流程

下面來看看真正的依賴收集流程是如何進行的。

function defineReactive(obj, key, value) { let childOb = observe(value) const dep = new Dep() Object.defineProperty(obj, key, { get() { if (Dep.target) { dep.depend() // 收集依賴 if (childOb) { childOb.dep.depend() } } return value }, set(newVal) { if (newVal === value) { return } value = newVal childOb = observe(newVal) dep.notify() return value } })}

首先初始化數據，調用 defineReactive 函數對數據進行劫持。

export class Watcher { constructor(vm, exprOrFn, cb, options){ this.getter = exprOrFn this.get() } get() { pushTarget(this) this.getter() popTarget(this) }}

初始化將 watcher 掛載到 Dep.target，this.getter 開始渲染頁面。渲染頁面需要對數據取值，觸發 get 回調，dep.depend 收集依賴。

class Dep{ constructor() { this.id = id++ this.subs = [] } depend() { Dep.target.addDep(this) }}

Dep.target 為 watcher，調用 addDep 方法，并傳入 dep 實例。

export class Watcher { constructor(vm, exprOrFn, cb, options){ this.deps = [] this.depIds = new Set() } addDep(dep) { if (!this.depIds.has(dep.id)) { this.depIds.add(dep.id) this.deps.push(dep) dep.addSub(this) } }}

addDep 中添加完 dep 后，調用 dep.addSub 并傳入當前 watcher 實例。

class Dep{ constructor() { this.id = id++ this.subs = [] } addSub(watcher) { this.subs.push(watcher) }}

將傳入的 watcher 收集起來，至此依賴收集流程完畢。

補充一點，通常頁面上會綁定很多屬性變量，渲染會對屬性取值，此時每個屬性收集的依賴都是同一個 watcher，即組件的渲染 watcher。

數組的依賴收集

methods.forEach(method => { arrayMethods[method] = function(...args) { let res = arrayProto[method].apply(this, args) let ob = this.__ob__ let inserted = ’’ switch(method){ case ’push’: case ’unshift’: inserted = args break; case ’splice’: inserted = args.slice(2) break; } // 對新增的值觀測 inserted && ob.observeArray(inserted) // 更新視圖 ob.dep.notify() return res }})

還記得重寫的方法里，會調用 ob.dep.notify 更新視圖，__ob__ 是我們在 Observe 為觀測數據定義的標識，值為 Observe 實例。那么 ob.dep 的依賴是在哪里收集的？

function defineReactive(obj, key, value) { // 1 let childOb = observe(value) const dep = new Dep() Object.defineProperty(obj, key, { get() { if (Dep.target) { dep.depend() // 2 if (childOb) { childOb.dep.depend() } } return value }, set(newVal) { if (newVal === value) { return } value = newVal childOb = observe(newVal) dep.notify() return value } })} observe 函數返回值為 Observe 實例 childOb.dep.depend 執行，為 Observe 實例的 dep 添加依賴

所以在數組更新時，ob.dep 內已經收集到依賴了。

整體流程

下面捋一遍初始化流程和更新流程，如果你是初次看源碼，不知道從哪里看起，也可以參照以下的順序。由于源碼實現比較多，下面展示的源碼會稍微刪減一些代碼

初始化流程

入口文件：

// 源碼位置：/src/core/instance/index.jsimport { initMixin } from ’./init’import { stateMixin } from ’./state’import { renderMixin } from ’./render’import { eventsMixin } from ’./events’import { lifecycleMixin } from ’./lifecycle’import { warn } from ’../util/index’function Vue (options) { this._init(options)}initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)export default Vue

_init：

// 源碼位置：/src/core/instance/init.jsexport function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ // merge 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 { // mergeOptions 對 mixin 選項和傳入的 options 選項進行合并 // 這里的 $options 可以理解為 new Vue 時傳入的對象 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } // expose real self vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, ’beforeCreate’) initInjections(vm) // resolve injections before data/props // 初始化數據 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, ’created’) if (vm.$options.el) { // 初始化渲染頁面 掛載組件 vm.$mount(vm.$options.el) } }}

上面主要關注兩個函數，initState 初始化數據，vm.$mount(vm.$options.el) 初始化渲染頁面。

先進入 initState：

// 源碼位置：/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) { // 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) }}function initData (vm: Component) { let data = vm.$options.data // data 為函數時，執行 data 函數，取出返回值 data = vm._data = typeof data === ’function’ ? getData(data, vm) : data || {} // proxy data on instance const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length while (i--) { const key = keys[i] if (props && hasOwn(props, key)) { process.env.NODE_ENV !== ’production’ && warn( `The data property '${key}' is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { proxy(vm, `_data`, key) } } // observe data // 這里就開始走觀測數據的邏輯了 observe(data, true /* asRootData */)}

observe 內部流程在上面已經講過，這里再簡單過一遍：

new Observe 觀測數據 defineReactive 對數據進行劫持

initState 邏輯執行完畢，回到開頭，接下來執行 vm.$mount(vm.$options.el) 渲染頁面：

$mount:

// 源碼位置：/src/platforms/web/runtime/index.js Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating)}

mountComponent:

// 源碼位置：/src/core/instance/lifecycle.jsexport function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { vm.$el = el callHook(vm, ’beforeMount’) let updateComponent /* istanbul ignore if */ if (process.env.NODE_ENV !== ’production’ && config.performance && mark) { updateComponent = () => { const name = vm._name const id = vm._uid const startTag = `vue-perf-start:${id}` const endTag = `vue-perf-end:${id}` mark(startTag) const vnode = vm._render() mark(endTag) measure(`vue ${name} render`, startTag, endTag) mark(startTag) vm._update(vnode, hydrating) mark(endTag) measure(`vue ${name} patch`, startTag, endTag) } } else { // 數據改變時 會調用此方法 updateComponent = () => { // vm._render() 返回 vnode，這里面會就對 data 數據進行取值 // vm._update 將 vnode 轉為真實dom，渲染到頁面上 vm._update(vm._render(), hydrating) } } // 執行 Watcher，這個就是上面所說的渲染wacther new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted && !vm._isDestroyed) { callHook(vm, ’beforeUpdate’) } } }, true /* isRenderWatcher */) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._isMounted = true callHook(vm, ’mounted’) } return vm}

Watcher:

// 源碼位置：/src/core/observer/watcher.js let uid = 0export default class Watcher { constructor(vm, exprOrFn, cb, options){ this.id = ++id this.vm = vm this.cb = cb this.options = options // exprOrFn 就是上面傳入的 updateComponent this.getter = exprOrFn this.deps = [] this.depIds = new Set() this.get() } get() { // 1. pushTarget 將當前 watcher 記錄到 Dep.target，Dep.target 是全局唯一的 pushTarget(this) let value const vm = this.vm try { // 2. 調用 this.getter 相當于會執行 vm._render 函數，對實例上的屬性取值， //由此觸發 Object.defineProperty 的 get 方法，在 get 方法內進行依賴收集（dep.depend），這里依賴收集就需要用到 Dep.target 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) } // 3. popTarget 將 Dep.target 置空 popTarget() this.cleanupDeps() } return value }}

至此初始化流程完畢，初始化流程的主要工作是數據劫持、渲染頁面和收集依賴。

更新流程

數據發生變化，觸發 set ，執行 dep.notify

// 源碼位置：/src/core/observer/dep.js 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<Watcher>; 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++) { // 執行 watcher 的 update 方法 subs[i].update() } }}

wathcer.update：

// 源碼位置：/src/core/observer/watcher.js /** * 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) }}

queueWatcher:

// 源碼位置：/src/core/observer/scheduler.js// 用于存儲 watcherconst queue: Array<Watcher> = []// 用于 watcher 去重let has: { [key: number]: ?true } = {}/** * Flush both queues and run the watchers. */function flushSchedulerQueue () { let watcher, id // 對 watcher 排序 queue.sort((a, b) => a.id - b.id) // do not cache length because more watchers might be pushed // as we run existing watchers for (index = 0; index < queue.length; index++) { watcher = queue[index] id = watcher.id has[id] = null // run方法更新視圖 watcher.run() }}/** * Push a watcher into the watcher queue. * Jobs with duplicate IDs will be skipped unless it’s * pushed when the queue is being flushed. */export function queueWatcher (watcher: Watcher) { const id = watcher.id if (has[id] == null) { has[id] = true // watcher 加入數組 queue.push(watcher) // 異步更新 nextTick(flushSchedulerQueue) }}

nextTick：

// 源碼位置：/src/core/util/next-tick.jsconst callbacks = []let pending = falsefunction flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 // 遍歷回調函數執行 for (let i = 0; i < copies.length; i++) { copies[i]() }}let timerFuncif (typeof Promise !== ’undefined’ && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) }}export function nextTick (cb?: Function, ctx?: Object) { let _resolve // 將回調函數加入數組 callbacks.push(() => { if (cb) { cb.call(ctx) } }) if (!pending) { pending = true // 遍歷回調函數執行 timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== ’undefined’) { return new Promise(resolve => { _resolve = resolve }) }}

這一步是為了使用微任務將回調函數異步執行，也就是上面的p.then。最終，會調用 watcher.run 更新頁面。

至此更新流程完畢。

寫在最后

如果沒有接觸過源碼的同學，我相信看完可能還是會有點懵的，這很正常。建議對照源碼再自己多看幾遍就能知道流程了。對于有基礎的同學就當做是復習了。

想要變強，學會看源碼是必經之路。在這過程中，不僅能學習框架的設計思想，還能培養自己的邏輯思維。萬事開頭難，遲早都要邁出這一步，不如就從今天開始。

簡化后的代碼我已放在github，有需要的可以看看。

以上就是詳細分析vue響應式原理的詳細內容，更多關于Vue響應式原理的資料請關注好吧啦網其它相關文章！