理解Vue的Watch原理

前言

watch 是由用戶定義的數據監聽，當監聽的屬性發生改變就會觸發回調，這項配置在業務中是很常用。在面試時，也是必問知識點，一般會用作和 computed 進行比較。

那么本文就來帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監聽的實現。在此之前，希望你能對響應式原理流程、依賴收集流程有一些了解，這樣理解起來會更加輕松。

 

watch 用法

“知己知彼，才能百戰百勝”，分析源碼之前，先要知道它如何使用。這對於后面理解有一定的輔助作用。

第一種，字符串聲明：

var vm = new vue({ el: '#example', data: { message: 'Hello' }, watch: { message: 'handler' }, methods: { handler (newVal, oldVal) { /* ... */ } } }) 

第二種，函數聲明：

var vm = new vue({ el: '#example', data: { message: 'Hello' }, watch: { message: function (newVal, oldVal) { /* ... */ } } }) 

第三種，對象聲明：

var vm = new Vue({ el: '#example', data: { peopel: { name: 'jojo', age: 15 } }, watch: { // 字段可使用點操作符 監聽對象的某個屬性 'people.name': { handler: function (newVal, oldVal) { /* ... */ } } } })

watch: {
  people: {
    handler: function (newVal, oldVal) { /* ... */ }, // 回調會在監聽開始之后被立即調用 immediate: true, // 對象深度監聽 對象內任意一個屬性改變都會觸發回調 deep: true } } 

第四種，數組聲明：

var vm = new Vue({ el: '#example', data: { peopel: { name: 'jojo', age: 15 } }, // 傳入回調數組，它們會被逐一調用 watch: { 'people.name': [ 'handle', function handle2 (newVal, oldVal) { /* ... */ }, { handler: function handle3 (newVal, oldVal) { /* ... */ }, } ], }, methods: { handler (newVal, oldVal) { /* ... */ } } })

 

工作流程

入口文件：

// 源碼位置：/src/core/instance/index.js import { 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.js export 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 選項和 new Vue 傳入的 options 選項進行合並 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:

// 源碼位置：/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) // 這里會初始化 watch if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } } 

initWatch:

// 源碼位置：/src/core/instance/state.js function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = watch[key] if (Array.isArray(handler)) { // 1 for (let i = 0; i < handler.length; i++) { createWatcher(vm, key, handler[i]) } } else { // 2 createWatcher(vm, key, handler) } } } 

1. 數組聲明的 watch 有多個回調，需要循環創建監聽
2. 其他聲明方式直接創建

createWatcher:

// 源碼位置：/src/core/instance/state.js function createWatcher ( vm: Component, expOrFn: string | Function, handler: any, options?: Object ) { // 1 if (isPlainObject(handler)) { options = handler handler = handler.handler } // 2 if (typeof handler === 'string') { handler = vm[handler] } // 3 return vm.$watch(expOrFn, handler, options) } 

1. 對象聲明的 watch，從對象中取出對應回調
2. 字符串聲明的 watch，直接取實例上的方法（注：methods 中聲明的方法，可以在實例上直接獲取）
3. expOrFn 是 watch 的 key 值，$watch 用於創建一個“用戶Watcher”

所以在創建數據監聽時，除了 watch 配置外，也可以調用實例的 $watch 方法實現同樣的效果。

$watch:

// 源碼位置：/src/core/instance/state.js export function stateMixin (Vue: Class<Component>) { Vue.prototype.$watch = function ( expOrFn: string | Function, cb: any, options?: Object ): Function { const vm: Component = this if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } // 1 options = options || {} options.user = true // 2 const watcher = new Watcher(vm, expOrFn, cb, options) // 3 if (options.immediate) { try { cb.call(vm, watcher.value) } catch (error) { handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`) } } // 4 return function unwatchFn () { watcher.teardown() } } } 

stateMixin 在入口文件就已經調用了，為 Vue 的原型添加 $watch 方法。

1. 所有“用戶Watcher”的 options，都會帶有 user 標識
2. 創建 watcher，進行依賴收集
3. immediate 為 true 時，立即調用回調
4. 返回的函數可以用於取消 watch 監聽

 

依賴收集及更新流程

經過上面的流程后，最終會進入 new Watcher 的邏輯，這里面也是依賴收集和更新的觸發點。接下來看看這里面會有哪些操作。

依賴收集

// 源碼位置：/src/core/observer/watcher.js export default class Watcher { constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean ) { this.vm = vm // 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() // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) } this.value = this.lazy ? undefined : this.get() } } 

在 Watcher 構造函數內，對傳入的回調和 options 都進行保存，這不是重點。讓我們來關注下這段代碼：

if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) } 

傳進來的 expOrFn 是 watch 的鍵值，因為鍵值可能是 obj.a.b，需要調用 parsePath 對鍵值解析，這一步也是依賴收集的關鍵點。它執行后返回的是一個函數，先不着急 parsePath 做的是什么，先接着流程繼續走。

下一步就是調用 get:

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 } 

pushTarget 將當前的“用戶Watcher”（即當前實例this） 掛到 Dep.target 上，在收集依賴時，找的就是 Dep.target。然后調用 getter 函數，這里就進入 parsePath 的邏輯。

// 源碼位置：/src/core/util/lang.js const bailRE = new RegExp(`[^${unicodeRegExp.source}.$_\\d]`) export function parsePath (path: string): any { if (bailRE.test(path)) { return } const segments = path.split('.') return function (obj) { for (let i = 0; i < segments.length; i++) { if (!obj) return obj = obj[segments[i]] } return obj } } 

參數 obj 是 vm 實例，segments 是解析后的鍵值數組，循環去獲取每項鍵值的值，觸發它們的“數據劫持get”。接着觸發 dep.depend 收集依賴（依賴就是掛在 Dep.target 的 Watcher）。

到這里依賴收集就完成了，從上面我們也得知，每一項鍵值都會被觸發依賴收集，也就是說上面的任何一項鍵值的值發生改變都會觸發 watch 回調。例如：

watch: {
    'obj.a.b.c': function(){} } 

不僅修改 c 會觸發回調，修改 b、a 以及 obj 同樣觸發回調。這個設計也是很妙，通過簡單的循環去為每一項都收集到了依賴。

更新

在更新時首先觸發的是“數據劫持set”，調用 dep.notify 通知每一個 watcher 的 update 方法。

update () {
  if (this.lazy) { dirty置為true this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } } 

接着就走 queueWatcher 進行異步更新，這里先不講異步更新。只需要知道它最后會調用的是 run 方法。

run () {
  if (this.active) { const value = this.get() if ( value !== this.value || 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) } } } } 

this.get 獲取新值，調用 this.cb，將新值舊值傳入。

 

深度監聽

深度監聽是 watch 監聽中一項很重要的配置，它能為我們觀察對象中任何一個屬性的變化。

目光再拉回到 get 函數，其中有一段代碼是這樣的：

if (this.deep) { traverse(value) } 

判斷是否需要深度監聽，調用 traverse 並將值傳入

// 源碼位置：/src/core/observer/traverse.js const seenObjects = new Set() export function traverse (val: any) { _traverse(val, seenObjects) seenObjects.clear() } function _traverse (val: any, seen: SimpleSet) { let i, keys const isA = Array.isArray(val) if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) { return } if (val.__ob__) { // 1 const depId = val.__ob__.dep.id // 2 if (seen.has(depId)) { return } seen.add(depId) } // 3 if (isA) { i = val.length while (i--) _traverse(val[i], seen) } else { keys = Object.keys(val) i = keys.length while (i--) _traverse(val[keys[i]], seen) } } 

1. depId 是每一個被觀察屬性都會有的唯一標識
2. 去重，防止相同屬性重復執行邏輯
3. 根據數組和對象使用不同的策略，最終目的是遞歸獲取每一項屬性，觸發它們的“數據劫持get”收集依賴，和 parsePath 的效果是異曲同工

從這里能得出，深度監聽利用遞歸進行監聽，肯定會有性能損耗。因為每一項屬性都要走一遍依賴收集流程，所以在業務中盡量避免這類操作。

 

卸載監聽

這種手段在業務中基本很少用，也不算是重點，屬於那種少用但很有用的方法。它作為 watch 的一部分，這里也講下它的原理。

使用

先來看看它的用法：

data(){
  return { name: 'jojo' } } mounted() { let unwatchFn = this.$watch('name', () => {}) setTimeout(()=>{ unwatchFn() }, 10000) } 

使用 $watch 監聽數據后，會返回一個對應的卸載監聽函數。顧名思義，調用它當然就是不會再監聽數據。

原理

Vue.prototype.$watch = function ( expOrFn: string | Function, cb: any, options?: Object ): Function { const vm: Component = this if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } options = options || {} options.user = true const watcher = new Watcher(vm, expOrFn, cb, options) if (options.immediate) { try { // 立即調用 watch cb.call(vm, watcher.value) } catch (error) { handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`) } } return function unwatchFn () { watcher.teardown() } } 

可以看到返回的 unwatchFn 里實際執行的是 teardown。

teardown () {
  if (this.active) { if (!this.vm._isBeingDestroyed) { remove(this.vm._watchers, this) } let i = this.deps.length while (i--) { this.deps[i].removeSub(this) } this.active = false } } 

teardown 里的操作也很簡單，遍歷 deps 調用 removeSub 方法，移除當前 watcher 實例。在下一次屬性更新時，也不會通知 watcher 更新了。deps 存儲的是屬性的 dep。

 

奇怪的地方

在看源碼時，我發現 watch 有個奇怪的地方，導致它的用法是可以這樣的：

watch:{ name:{ handler: { handler: { handler: { handler: { handler: { handler: { handler: ()=>{console.log(123)}, immediate: true } } } } } } } } 

一般 handler 是傳遞一個函數作為回調，但是對於對象類型，內部會進行遞歸去獲取，直到值為函數。所以你可以無限套娃傳對象。

遞歸的點在 $watch 中的這段代碼：

if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } 

如果你知道這段代碼的實際應用場景麻煩告訴我一下，嘿嘿~

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

總結

watch 監聽實現利用遍歷獲取屬性，觸發“數據劫持get”逐個收集依賴，這樣做的好處是其上級的屬性發生修改也能執行回調。

與 data 和 computed 不同，watch 收集依賴的流程是發生在頁面渲染之前，而前兩者是在頁面渲染時進行取值才會收集依賴。

在面試時，如果被問到 computed 和 watch 的異同，我們可以從下面這些點進行回答：

• 一是 computed 要依賴 data 上的屬性變化返回一個值，watch 則是觀察數據觸發回調；
• 二是 computed 和 watch 依賴收集的發生點不同；
• 三是 computed 的更新需要“渲染Watcher”的輔助，watch 不需要，這點在我的上一篇文章有提到。