Vue原始碼探祕（三）（new Vue發生了什麼？）

前端森林發表於2020-03-19
Vue原始碼

引言

在前兩篇文章中，我分別介紹了Vue的構建流程和Vue入口檔案。有了這些前期的準備工作，下面我將帶大家正式深入原始碼學習。

Vue的一個核心思想是資料驅動，相信大家一定對這個不陌生。所謂資料驅動，就是檢視由資料驅動生成。相比傳統的使用jQuery等前端庫直接操作DOM，大大提高了開發效率，程式碼簡潔易維護。

在接下來的幾篇文章中，我將主要分享資料驅動部分相關的原始碼解讀。

先來看一個簡單的例子:

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data() {
    return {
      message: 'hello Vue!'
    }
  }
})
</script>
複製程式碼

最終頁面展示效果是:

如上圖所示，頁面上顯示hello Vue!，也就是說Vue將js裡的資料渲染到DOM上，也就是資料驅動檢視，這個渲染過程就是最近幾篇文章我們要著重分析的。

本篇文章，我們先來一起看下new Vue發生了什麼。

_init()

在上一篇文章中，我們介紹了Vue建構函式是定義在src/core/instance/index.js中的:

// src/core/instance/index.js
function Vue (options) {
  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)
}
複製程式碼

建構函式的核心是呼叫了_init方法，_init定義在src/core/instance/init.js中:

// src/core/instance/init.js
 Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    [1]
    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // 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 {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = 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')

    [2]
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
複製程式碼

梳理下這裡面的執行流程:

[1]和[2]之間的程式碼主要是進行了效能追蹤，參考官網:

接下來是一個合併options的操作。

接下來呼叫了很多初始化函式，從函式名稱可以看出分別是執行初始化生命週期、初始化事件中心、初始化渲染等操作。文章開頭的 demo 中有定義data選項，我們先來分析下initState是如何處理data的:

// 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)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
複製程式碼

可以看到，initState函式是對props、methods、data、computed、watch這幾項的處理。我們現在只關注initData對data的初始化:

// src/core/instance/state.js
function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? 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)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    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)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
複製程式碼

這裡給例項新增了屬性_data並把data賦值給它，然後判斷data如果是一個函式的話會檢查函式返回值是不是純物件，如果不是會丟擲警告。

我們知道，在Vue中，data屬性名和methods中的函式名、props的屬性名都不能重名，這就是接下來的程式碼所做的工作了。這裡遍歷了data的所有屬性，去和methods和props中的進行對比，如果有重名則會丟擲警告。如果沒有重名並且isReserved返回 false 的話，就接著執行proxy方法。下面是proxy部分的程式碼:

// src/core/instance/state.js
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}
複製程式碼

這裡其實是做了一層代理，先是定義一個屬性描述符sharedPropertyDefinition，然後呼叫Object.defineProperty，意思就是當訪問/修改target.key時會觸發get/set，代理到this[sourceKey][key]（即vm[_data][key]）上。

先來看一下，平時我們是怎麼寫Vue的:

<script >
export default {
  data() {
    return {
      name: '森林'
    }
  },
  methods: {
    print() {
      console.log(this.name);
    }
  }
}
</script>
複製程式碼

在methods中通過this.name就能直接訪問到data裡面的值（實際上是訪問了this._data.name）。到這裡，我們就清楚了為什麼在initData一開始的程式碼，開頭有一行是將data儲存到vm._data中。

回到initData中，接著上面的繼續往下走，最後就是呼叫observe對資料做了響應式處理。響應式處理部分比較重要，我會在後面的章節中詳細分析。

看完initData，我們回到_init函式。經過一系列的初始化操作後，最後一步是判斷vm.$options.el是否存在，也即傳入的物件是否有el屬性，有的話就呼叫vm.$mount進行掛載，掛載的目標就是把模板渲染成最終的DOM。

總結

通過本篇文章，我們知道了執行new Vue後其實是執行_init進行了一系列初始化的操作。本文呢，我們是把_init函式大致的執行流程梳理了一遍。上文也提到函式的最後呼叫了vm.$mount進行掛載，這一步操作是資料渲染到DOM上的關鍵，在下一篇中，我會帶大家一起看下$mount內部具體進行了什麼操作。

相關文章