Vue 原始碼分析（v2.5.15）part 1：Vue 初始化

lwenn發表於2018-06-27
Vue原始碼

前言

本章主要介紹 Vue 的初始化過程，涉及到 Vue 的定義、靜態 API 和例項 API 等，對方法和屬性的具體定義不作詳解。希望能給大家閱讀原始碼一些幫助。

閱讀前提：看過文件，瞭解 Vue 的用法和其 API。

專案結構

vue
├── BACKERS.md
├── LICENSE
├── README.md
├── benchmarks
├── coverage
├── dist：vue 打包結果
├── examples：使用示例
├── flow：Flow 型別定義
├── package.json
├── packages：打包結果（客戶端外掛，npm包）
├── scripts：打包配置檔案
├── src：原始碼
│    ├── compiler：模板編譯解析
│    ├── core：Vue 核心程式碼
│    ├── platforms：平臺相關（web和weex）
│    ├── server：服務端渲染
│    ├── sfc：vue元件檔案解析
│    └── shared：工具方法
├── test：測試用例
├── types：TypeScript 定義
└── yarn.lock
複製程式碼

模組

按自己的理解畫了以下模組圖（僅供參考）。

image

入口檔案

首先看專案的 package.json，找到打包命令

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
複製程式碼

得知打包配置檔案 scripts/config.js。

// scripts/config.js
// ...
// Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },
// ...

// scripts/alias.js

web: resolve('src/platforms/web')
複製程式碼

由此得知入口檔案是 src/platforms/web/entry-runtime-with-compiler.js。

Vue 初始化

image

Vue 的定義

src/platforms/web/entry-runtime-with-compiler.js 
--> src/platforms/web/runtime/index.js 
--> src/core/index.js 
--> src/core/instance/index.js
複製程式碼

Vue 定義在 src/core/instance/index.js 中：

// src/core/instance/index.js
// Vue 的定義
function Vue (options) {
  // 判斷是否通過 new 呼叫，不是生產環境時會在控制檯列印警告
  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)
}

// 初始化：例項方法和屬性
initMixin(Vue) // _init 方法定義
stateMixin(Vue) // 資料相關方法：$data, $props, $set, $delete, $watch
eventsMixin(Vue) // 事件方法：$on, $once, $off, $emit
lifecycleMixin(Vue) // Vue 生命週期：_update, $forceUpdate, $destroy
renderMixin(Vue) // 渲染方法定義：$nextTick, _render
複製程式碼

Vue 靜態 API

src/core/index.js 主要是呼叫了 initGlobalAPI，給 Vue 新增了靜態屬性和靜態方法。

export function initGlobalAPI (Vue: GlobalAPI) {
  // 設定 config 只讀屬性，包括 devtools 等
  const configDef = {}
  configDef.get = () => config
  // ...
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  // 暴露工具方法，但不是作為公開的 API（不建議使用）
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  // 暴露靜態方法
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  Vue.options = Object.create(null)
  // 設定屬性 components, directives, filters
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  // Vue.options.components.KeepAlive
  extend(Vue.options.components, builtInComponents)

  // Vue.use
  initUse(Vue)
  // Vue.mixin
  initMixin(Vue)
  // Vue.extend
  initExtend(Vue)
  // Vue.component, Vue.directive, Vue.filter
  initAssetRegisters(Vue)
}
複製程式碼

平臺特定 API

src/platforms/web/runtime/index.js 給 Vue 新增了 web 平臺的方法，執行時指令和元件，新增例項方法 $mount。

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

模板編譯器

上面的程式碼已經完成了 Vue 執行時的初始化，最後的 src/platforms/web/entry-runtime-with-compiler.js 修改了例項方法 $mount，實際上是新增了模板編譯器。

可以和打包配置檔案 scripts/config.js 中的 web-runtime-prod 配置項作比對。

// 先儲存原來的 $mount，在最後會呼叫
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  
  /***********************************************
   * 當不存在 options.render 時
   * 通過處理掛載的模板（編譯成渲染函式）
   * 來定義 options.render 和 options.staticRenderFns
   **********************************************/
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        // 如果傳入模板id，通過id獲取dom
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        // 如果傳入模板 dom，取出 innerHTML 字串
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 如果傳入的是el，取el的 outerHtml 作為模板
      template = getOuterHTML(el)
    }
    // 判斷經過上面的處理後，模板有沒有值
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      // 能過編譯器把模板處理成渲染函式，並賦值到 options
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  //////////////////////////////////////////////
  
  // 呼叫了上面儲存的 mount 方法
  return mount.call(this, el, hydrating)
}
複製程式碼

相關文章