簡單易懂的Vue數據綁定源碼解讀

時間 2019-11-17

標籤簡單易懂 vue 數據綁定源碼解讀简体版

原文原文鏈接

從去年開始學習vue到今天有半年多的時間了，大部分功能也已經用的很熟練，因此是時候開始學習源碼修煉修煉內功了，我會把本身學到看到的內容用最容易理解方式與你們分享，一塊兒進步，若是文章有哪些不對的地方也歡迎你們指正。

老規矩，先放一張本身整理的圖：javascript

vue版本:2.5.0html

一.準備

在分析源碼以前，我先說兩個關於數據綁定相關的知識點：前端

1. 對象的訪問器屬性——getter和setter：vue

Object有一個名爲defineProperty的方法，能夠設置訪問器屬性，好比：java

當咱們執行obj.a的時候會觸發get函數，控制檯會打印'this is the getter'，當咱們爲obj.a賦值的時候，obj.a=2;這是控制檯會打印"change new value"node

你們能夠把getter和setter理解成獲取對象屬性值和給對象屬性賦值時的鉤子就能夠了。react

2. 訂閱者模式：web

訂閱者模式也叫「訂閱-發佈者模式」，對於前端來講這種模式簡直無處不在，好比咱們經常使用的xx.addEventListener('click',cb,false)就是一個訂閱者，它訂閱了click事件，當在頁面觸發時，瀏覽器會做爲發佈者告訴你，能夠執行click的回調函數cb了。express

再舉一個更簡單的例子，士兵與長官就是一個訂閱與發佈者的關係，士兵的全部行動都經過長官來發布，只有長官發號施令，士兵們才能執行對應的行動。數組

在這段代碼中，obj是發佈者，Watcher實例是訂閱者，Dep用來儲存訂閱者，以及接受發佈者通知的一個媒介。

另外，關於數據綁定還有一個知識點，那就是虛擬dom(vnode)，不過鑑於這部分東西太多，我就在文中一筆帶過了，從此會專門開一篇文章聊一聊vnode相關的內容。

二. 從data看數據綁定

1. 在vue/src/core/instance/index.js中：

function Vue (options) {
  //options就是咱們傳入new Vue中的el,data,props,methods等
  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)
}
複製代碼

這段代碼是咱們執行new Vue()時執行的函數，它先判斷是不是使用new Vue()而不是Vue()建立實例，不然會有提示。接下來執行函數this._init(options);

2. 在vue/src/core/instance/init.js中的initMixin函數定義了vue._init()方法，須要關注的重點是這裏：

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this;
    ......
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm)
    initState(vm) //初始化data、props等數據的監聽
    initProvide(vm)
    callHook(vm, 'created')

    ......

    if (vm.$options.el) {
      //渲染頁面
      vm.$mount(vm.$options.el)
    }
}複製代碼

前半部分代碼是初始化各類東西，包括生命週期，事件，數據等。後半部分代碼vm.$mount(vm.$options.el)是用來渲染頁面的。

這裏咱們先說最重要的initState(vm)；

3. 在vue/src/core/instance/state.js中：

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options; //opts就是options,即包含了el,data,props等屬性或方法的對象
  if (opts.props) initProps(vm, opts.props); //初始化props
  if (opts.methods) initMethods(vm, opts.methods); //初始化methods
  if (opts.data) {
    initData(vm) //初始化data
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
複製代碼

不管是props，data仍是computed，屬性綁定的思路都是差很少的，因此我就用data來講明瞭。

4. 在與initState相同的文件下，咱們能夠看到initData方法：

function initData (vm: Component) {
  let data = vm.$options.data
  //爲data和vm._data賦值
  data = vm._data = typeof data === 'function'
    //若是data是函數，咱們就將data的返回值掛載到vm下，賦給data和vm._data
    ? getData(data, vm)
    : data || {} 
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data) //keys爲data的屬性組成的數組
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    //這個循環裏是判斷是否出現data的屬性與props，methods重名，不然給出警告
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    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)
    }
  }
  // observer方法，建立並返回Observer實例，實現綁定的重要函數
  observe(data, true /* asRootData */)
}
複製代碼

5. 在vue/src/core/observer/index.js文件中，能夠看到observer函數：

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  //若是傳入的data有__ob__方法，直接複製給ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    //不然經過new Observer(value)方法建立一個實例，並賦值給ob
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}
複製代碼

6. 在同文件下能夠看到Observer類的定義：

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    //爲傳入的data對象添加一個__ob__屬性，值爲Observer實例自己
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      //若是傳入的data是個數組，執行augment()方法
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      //不然運行walk()方法，事實上大部分狀況咱們都走walk這個方法
      this.walk(value)
    }
 }
複製代碼

7. 同文件下有walk函數：

在看代碼以前我先插一句，這裏傳入的obj已經不是完整的data了，假設咱們的data是這樣的：

data(){
    return {
        a:1,
        b:2,
    }
}複製代碼

那麼在經歷了initData中的getData後，已經變成了{a:1, b:2};

好的咱們接着說walk方法：

walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
}複製代碼

walk()方法遍歷對象的每個屬性，執行defineReactive()方法，這個方法的做用就是將每一個屬性轉化爲getter和setter，同時新建一個Dep的實例。

8. 在和walk，Observer同文件下：

export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean ) {
  //每一個屬性偶讀新建一個Dep的實例
  const dep = new Dep()
  
  //獲取每一個屬性的特性：configurable、enumerable，getter,setter等等.......
  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
 
  //這裏是遞歸遍歷屬性值，有的屬性的值仍是對象，就繼續執行observer
  let childOb = !shallow && observe(val)

  //重點！！將屬性轉化爲getter，setter
  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()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}
複製代碼

若是看了前面文章還有印象的話，相信你們在這段代碼裏會看到一位老朋友，沒錯，他就是在訂閱者模式時提到的Dep。

在getter時執行了reactiveGetter函數，裏面會判斷Dep.target是否存在，若是存在，則執行dep.depend()方法；而在setter的最後，執行了dep.notify()方法。

三. Dep類

在vue/src/core/observer/dep.js中咱們能夠看到Dep類的定義：

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }
  //將訂閱者添加到this.subs中
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  //defineReactive方法中使用的depend方法
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  //通知訂閱者執行update()函數
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}
複製代碼

看到this.subs和notify()相信你已經知道Dep是什麼了吧？沒錯，就如同我前面講的，Dep這個類就是在vue實現數據綁定的過程當中，做爲訂閱者和發佈者的一個橋樑。經過defineReactive的代碼咱們能夠知道，當爲屬性賦值觸發setter時會執行dep.notify()，咱們能夠說set函數執行了發佈者的行爲，那訂閱者又是誰呢？Dep.target又是什麼呢？咱們繼續往下看。

四. 訂閱者Watcher

咱們繼續看dep.js這個文件，在文件最後幾行，有以下代碼：

Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}複製代碼

pushTarget()方法就是把傳入的Watcher實例賦給Dep.target，一旦Dep.target有值的話，就能夠執行dep.depend()方法了。

咱們在vue/src/core/obsever/watcher.js能夠看到Watcher類的定義：

export default class Watcher {
  .......
  constructor (
    vm: Component, //vm
    expOrFn: string | Function,
    cb: Function,
    options?: Object
  ) {
    this.vm = vm
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } 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
    //若是Watcher第二個參數是函數，就賦值給this.getter
    if (typeof expOrFn === 'function') { 
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        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
      //大部分狀況下不會傳options參數，this.lazy值爲false,因此執行this.get()方法
      : this.get()
  }
複製代碼

Watcher下方就有get()方法的定義：

get () {
    //先將Watcher實例賦值給Dep.target;
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      //執行this.getter方法
      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
  }
複製代碼

get方法先給Dep.Target賦值，接着執行this.getter()方法。那麼何時新建Watcher實例？給Dep.target賦值呢？

在回答這個問題前我先說一下dep.depend方法，裏面執行了Dep.target.addDep(this)，這個方法也能夠換成new Watcher.addDep(this)；這裏的this就是new Watcher實例自己

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)) {
        //通過一系列判斷，最終將Watcher實例傳給dep.subs中；
        dep.addSub(this)
      }
    }
  }
複製代碼

好的，咱們接着回到什麼新建Watcher實例的這個問題上，還記得我在Vue.prototype._init方法中提到的$mount渲染頁面的方法嗎？

在vue/src/platforms/web/runtime/index.js中能夠看到$mount方法的定義：

Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
複製代碼

在vue/src/core/instance/lifecycle.js中能夠看到mountComponent的中有這樣幾行代碼：

updateComponent = () => {
    vm._update(vm._render(), hydrating)
}

vm._watcher = new Watcher(vm, updateComponent, noop);
複製代碼

vm._update(vm._render(), hydrating)這段代碼中vm.render()實際上就是生成了vnode（虛擬dom），vm._update則是根據vnode生成真正的dom，渲染頁面。把這段代碼賦值給updateComponent，以後建立new Watcher的實例，將updateComponent做爲第二個參數傳給this.getter。Watcher實例執行get()方法時給Dep.target賦值，執行updateComponent函數，從而刷新頁面，獲取data中各個屬性值的時候又會觸發getter，因而將Watcher實例傳給Dep.subs中造成依賴。

最後，咱們再來看dep.notify()函數，它會遍歷subs中的每個元素，執行update()方法：

update () {
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    //在nextTick的時候執行run
    queueWatcher(this)
  }
}
複製代碼

咱們主要看this.run()方法：

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)
        }
      }
    }
  }複製代碼