手摸手帶你理解Vue的Watch原理

来源:https://www.cnblogs.com/chanwahfung/archive/2020/06/29/13210167.html
-Advertisement-
Play Games

前言 watch 是由用戶定義的數據監聽，當監聽的屬性發生改變就會觸發回調，這項配置在業務中是很常用。在面試時，也是必問知識點，一般會用作和 computed 進行比較。 那麼本文就來帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監聽的實現。在此之前，希望你能對響應式原理流程、依賴收集 ...


前言

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

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

往期文章：

手摸手帶你理解Vue響應式原理

手摸手帶你理解Vue的Computed原理

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)
}

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

總結

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

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

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

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ViewBinding的簡單使用
    Android自家的，又可以省去findviewbyid()，而且Butterknife上大神都已經推薦使用的，還有什麼理由不去改寫呢。build.gradle中開啟viewBinding功能。Activity 綁定private lateinit var mBinding: ActivityEbo... ...
  • iOS-內購及訂閱
    原文鏈接：https://www.cnblogs.com/qiyer/、https://www.cnblogs.com/qiyer/p/7442680.html ...
  • 位元組iOS開發崗面試真題（已拿offer）
    序言 疫情基本控制，同時面試也漸漸開始了，以下iOS面試題僅供參考，畢竟面試是不可控的，但懂得越多，自然機會越大！ 位元組一面內容： 1、 自我介紹 2、 介紹一下簡歷中的一個項目 3、 面向對象的三個要素 4、 多態？ 5、 Java，python，OC運行效率孰高？ 6、 Property，其中c ...
  • Android 開發技術周報 Issue#286
    新聞 谷歌發佈全新AR技術 單攝像頭即可實現AR景深感應 谷歌發佈首款基於Android 11開發者預覽版的Android TV版 代號“sabrina”：新Android TV電視棒將採用鵝卵石造型 Android 12曝光：谷歌欲全面拋棄對32位的支持 Android 11中的“對話”功能可能不 ...
  • 簡單兩步實現Android app 本地設置信息的保存與調用
    Android app 本地設置信息的保存與調用。preferences.getString後面的文本是調用失敗後的預設顯示值。儲存值一定要實例化一個Editor出來，如果直接使用.edit().putString()不是不可以，但會每次調用都多出一個實例。最後記得要editor.apply()執行... ...
  • javascript基礎類型和引用類型
    基本類型（棧數據） String Number Boolean null undefined symbol（ES6） 引用類型（堆數據） Array Object Function Date RegExp 等 區分 棧小堆大 1.基礎類型是放置在棧裡面，一般基礎類型的數據都比較小，賦值不影響自身 v ...
  • vue中8種組件通信方式, 值得收藏!
    vue是數據驅動視圖更新的框架, 所以對於vue來說組件間的數據通信非常重要，那麼組件之間如何進行數據通信的呢？ 首先我們需要知道在vue中組件之間存在什麼樣的關係, 才更容易理解他們的通信方式, 就好像過年回家，坐著一屋子的陌生人，相互之間怎麼稱呼，這時就需要先知道自己和他們之間是什麼樣的關係。 ...
  • 讓你減少加班的15條高效JS技巧！記得收藏哦
    延遲函數delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) ​ const getData = status => new Promise((resolve, reject) => { ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類