Vue2.0源碼分析：Rollup構建，目錄設計和總體流程

時間  2021-08-12
標籤 html vue node webpack git github web express npm json 欄目 HTML 简体版
原文   原文鏈接

Vue2.0源碼分析

若是以爲寫得不錯，請到GitHub我一個Starhtml

下一篇：Vue2.0源碼分析：響應式原理(上)vue

介紹和參考

本篇Vue2.6.11源碼分析文章由觀看Vue.js源碼全方位深刻解析視頻，閱讀深刻淺出Vue.js書籍以及參考其餘Vue源碼分析博客而來，閱讀視頻和書籍請支持正版。node

Vue發展簡史

  • 2013年7月，Vue.js在Github上第一次提交，此時名字叫作Element，後來被更名爲Seed.js，到如今的Vue.js。
  • 2013年12月，Github發佈0.6版本，並正式改名爲Vue.js。
  • 2014年2月，在Hacker News網站上時候首次公開。
  • 2015年10月，Vue.js發佈1.0.0版本。
  • 2016年10月，Vue.js發佈2.0版本。

Vue版本變化

Vue2.0版本和Vue1.0版本之間雖然內部變化很是大，整個渲染層都重寫了，但API層面的變化卻很小，對開發者來講很是友好，另外Vue2.0版本還引入了不少特性：webpack

  • Virtual DOM虛擬DOM。
  • 支持JSX語法。
  • 支持TypeScript。
  • 支持服務端渲染ssr。
  • 提供跨平臺能力weex。

正確理解虛擬DOM：Vue中的虛擬DOM借鑑了開源庫snabbdom的實現，並根據自身特點添加了許多特性。引入虛擬DOM的一個很重要的好處是：絕大部分狀況下，組件渲染變得更快了，而少部分狀況下反而變慢了。引入虛擬DOM這項技術一般都是在解決一些問題，然而解決一個問題的同時也可能會引入其它問題，這種狀況更多的是如何作權衡、如何作取捨。所以，一味的強調虛擬DOM在任什麼時候候都能提升性能這種說法須要正確對待和理解。git

核心思想：Vue兩大核心思想是數據驅動和組件化，所以咱們在介紹完源碼目錄設計和總體流程後，會先介紹這兩方面。github

源碼目錄設計和架構設計

源碼目錄設計

Vue.js源碼目錄設計以下：web

|-- dist              # 構建目錄
|-- flow              # flow的類型聲明，相似於TypeScipt
|-- packages          # 衍生的npm包，例如vue-server-renderer和vue-template-compiler
|-- scripts           # 構建配置和構建腳本
|-- test              # 端到端測試和單元測試用例
|-- src               # 源代碼
|   |-- compiler      # 編譯相關代碼
|   |-- core          # 核心代碼
|   |-- platforms     # 跨平臺
|   |-- server        # 服務端渲染
|   |-- sfc           # .vue文件解析邏輯
|   |-- shared        # 工具函數/共享代碼
複製代碼

對以上目錄簡要作以下介紹：express

  • dist：rollup構建目錄，裏面存放了全部Vue構建後不一樣版本的文件。npm

  • flow：它是Facebook出品的JavaScript靜態類型檢查工具，早期Vue.js選擇了flow而不是如今的TypeScript來作靜態類型檢查，而在最新的Vue3.0版本則選擇使用TypeScript來重寫。json

  • packages：Vue.js衍生的其它npm包，它們在Vue構建時自動從源碼中生成而且始終和Vue.js保持相同的版本，主要是vue-server-renderer和vue-template-compiler這兩個包，其中最後一個包在咱們使用腳手架生成項目，也就是使用.vue文件開發Vue項目時會使用到這個包。

  • scripts：rollup構建配置和構建腳本，Vue.js可以經過不一樣的環境構建不一樣的版本的祕密都在這個目錄下。

  • test：Vue.js測試目錄，自動化測試對於一個開源庫來講是相當重要的，測試覆蓋率在必定程度上是衡量一個庫質量的一個重要指標。測試用例不管對於開發仍是閱讀源碼，都是有很大益處的，其中經過測試用例去閱讀Vue源碼是廣泛認爲可行的一種方式。

  • src/compiler：此目錄包含了與Vue.js編譯相關的代碼，它包括：模板編譯成 AST 抽象語法樹、AST 抽象語法樹優化和代碼生成相關代碼。編譯的工做能夠在構建時用runtime-only版本，藉助webpack和vue-loader等工具或插件來進行編譯。也能夠在運行時，使用包含構建功能的runtime + compiler版本。顯然，編譯是一項比較消耗性能的工做，因此咱們平常的開發中，更推薦使用runtime-only的版本開發(體積也更小)，也就是經過.vue文件的形式開發。

// 須要使用帶編譯的版本
new Vue({
  data: {
    msg: 'hello,world'
  }
  template: '<div>{{msg}}</div>'
})

// 不須要使用帶編譯的版本
new Vue({
  data: {
    msg: 'hello,world'
  },
  render (h) {
    return h('div', this.msg)
  }
})
複製代碼
  • src/core：此目錄包含了Vue.js的核心代碼，包括：內置組件keep-alive、全局 API(Vue.use、Vue.mixin和Vue.extend等)、實例化、響應式相關、虛擬 DOM 和工具函數等。
|-- core
|   |-- components      # 內助組件
|   |-- global-api      # 全局API
|   |-- instance        # 實例化
|   |-- observer        # 響應式
|   |-- util            # 工具函數
|   |-- vdom            # 虛擬DOM
複製代碼
  • src/platform：Vue2.0提供了跨平臺的能力，在React中有React Native跨平臺客戶端，而在Vue2.0中其對應的跨平臺就是Weex。
|-- platform
|   |-- web      # web瀏覽器端
|   |-- weex     # native客戶端
複製代碼

  • src/server: Vue2.0提供服務端渲染的能力，全部跟服務端渲染相關的代碼都在server目錄下，此部分代碼是運行在服務端，而非 Web 瀏覽器端。

  • src/sfc：此目錄的主要做用是如何把.vue文件解析成一個JavaScript對象。

  • src/shared：此目錄下存放了一些在 Web 瀏覽器端和服務端都會用到的共享代碼。

架構設計

咱們經過以上目錄結構能夠很容易的發現，Vue.js總體分爲三個部分：核心代碼、跨平臺相關和公共工具函數。

同時其架構是分層的，最底層是一個構造函數(普通的函數)，最上層是一個入口，也就是將一個完整的構造函數導出給用戶使用。在中間層，咱們須要逐漸添加一些方法和屬性，主要是原型prototype相關和全局API相關。

Vue架構設計

Rollup構建版本

Rollup基礎知識

Vue.js經過rollup構建工具進行構建，它是一個相似於webpack的打包工具，區別於webpack它更適合一個Library庫的打包。在學習Vue.js源碼以前，咱們有必要知道Vue.js是如何構建不一樣版本的。

核心概念

同webpack同樣，rollup也有如下幾大核心概念：

  • input：入口文件，類比於webpack的entry，它指明瞭咱們庫文件入口位置。
  • output：輸出位置，它指明瞭打包後的輸出信息，包括：輸出目錄，打包文件名等。
  • plugins：插件，rollup在構建過程當中，插件可提供一些輔助功能，例如：alias別名解析、轉義ES6等。
  • external：當咱們的庫依賴於其它第三方庫時，咱們不須要把這些第三方庫一塊兒打包，而是應該把依賴寫在external裏面。

同webpack同樣，rollup一樣適合使用配置文件的作法來配置打包的選項，例如：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: [
    { file: 'dist/vue.js', format: 'umd', name: 'Vue' },
    { file: 'dist/vue.common.js', format: 'cjs', name: 'Vue' },
    { file: 'dist/vue.esm.js', format: 'es', name: 'Vue' }
  ]
}
複製代碼

構建版本說明：

  • umd：此選項構建出來的庫文件主要適用於Web端，能夠經過不一樣的方式去使用：script標籤引入，ES Module規範引入和CommonJs規範引入等。
  • cjs: 此選項構建出來的庫文件主要爲CommonJs規範，可在Node環境中使用。
  • es：此版本構建出來的庫文件主要爲ES Module規範，可在支持ES Module也就是import/export的環境中使用。

有了以上配置文件，咱們能夠在package.json中進行以下修改：

{
  "name": "Vue",
  "version": "1.0.0",
  "scripts": {
    "dev": "rollup -w -c scripts/rollup.config.dev.js",
    "build": "rollup -c scripts/rollup.config.prod.js"
  }
}
複製代碼

參數說明：

  • -c：爲--config的縮寫，表示設置rollup打包的配置。
  • -w：爲--watch的縮寫，在本地開發環境添加-w參數能夠監控源文件的變化，自動從新打包。

經常使用插件

rollup並不像webpack那樣強大，它須要和其它插件配合使用才能完成特定的功能，經常使用的插件有：

  • @rollup/plugin-json： 支持從.json讀取信息，配合rollup的Tree Shaking可只打包.json文件中咱們用到的部分。
  • @rollup/plugin-commonjs：將CommonJs規範的模塊轉換爲ES6提供rollup使用。
  • @rollup/plugin-node-resolve：與@rollup/plugin-commonjs插件一塊兒使用，配合之後就可使用node_modules下的第三方模塊代碼了。
  • @rollup/plugin-babel：把ES6代碼轉義成ES5代碼，須要同時安裝@babel/core和@babel/preset-env插件。注意：若是使用了高於ES6標準的語法，例如async/await，則須要進行額外的配置。
  • rollup-plugin-terser：代碼壓縮插件，另一種方案是rollup-plugin-uglify + uglify-es進行代碼壓縮，不過更推薦第一種方案。

以上插件使用方式以下：

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

const config =  {
  input: 'src/index.js',
  output: [
    { file: 'dist/vue.js', format: 'umd', name: 'Vue' },
    { file: 'dist/vue.common.js', format: 'cjs', name: 'Vue', exports: 'auto' },
    { file: 'dist/vue.esm.js', format: 'es', name: 'Vue', exports: 'auto' }
  ],
  plugins: [
    json(),
    resolve(),
    babel(),
    commonjs(),
    terser()
  ]
}

export default config
複製代碼

區分生產環境和開發環境

正如你在上面看到的那樣，咱們能夠像webpack同樣進行開發環境和生產環境的配置區分，咱們把和rollup構建相關的文件都放在scripts目錄下：

|-- scripts
|   |-- rollup.config.base.js      # 公共配置
|   |-- rollup.config.dev.js       # 開發環境配置
|   |-- rollup.config.prod.js      # 生產環境配置
複製代碼

根據咱們的拆分邏輯，rollup.config.base.js代碼以下：

import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'

const config =  {
  input: 'src/index.js',
  plugins: [
    json(),
    resolve(),
    babel(),
    commonjs()
  ]
}

export default config
複製代碼

rollup.config.dev.js代碼以下：

import baseConfig from './rollup.config.base.js'
import serve from 'rollup-plugin-serve'
import { name } from '../package.json'

const config =  {
  ...baseConfig,
  output: [
    { file: 'dist/vue.js', format: 'umd', name },
    { file: 'dist/vue.common.js', format: 'cjs', name, exports: 'auto' },
    { file: 'dist/vue.esm.js', format: 'es', name, exports: 'default' }
  ],
  plugins: [
    ...baseConfig.plugins,
    serve({
      open: true,
      port: '4300',
      openPage: '/example/index.html',
      contentBase: ''
    })
  ]
}
export default config
複製代碼

配置說明：本地開發環境下，咱們能夠有選擇的添加rollup-plugin-serve插件，它相似於webpack-dev-server，能在開發環境下起一個服務方便咱們進行開發和代碼調試。

rollup.config.prod.js代碼以下：

import baseConfig from './rollup.config.base.js'
import { terser } from 'rollup-plugin-terser'
import { name } from '../package.json'
const config =  {
  ...baseConfig,
  output: [
    { file: 'dist/vue.min.js', format: 'umd', name },
    { file: 'dist/vue.common.min.js', format: 'cjs', name, exports: 'auto' },
    { file: 'dist/vue.esm.min.js', format: 'es', name, exports: 'default' }
  ],
  plugins: [
    ...baseConfig.plugins,
    terser()
  ]
}

export default config
複製代碼

配置說明：生產環境下，咱們須要對代碼進行壓縮處理，對ES Module，CommonJs和UMD等規範分別生成其對應的壓縮文件。

分別運行npm run dev和npm run build以後，咱們能夠獲得以下的目錄：

|-- dist
|   |-- vue.js            # UMD未壓縮版本
|   |-- vue.min.js        # UMD壓縮版本
|   |-- vue.esm.js        # ES Module未壓縮版本
|   |-- vue.esm.min.js    # ES Module壓縮版本
|   |-- vue.common.js     # CommonJs未壓縮版本
|   |-- vue.common.min.js # CommonJs壓縮版本
複製代碼

最後，若是咱們像Vue.js同樣構建的是一個庫文件，那麼咱們還須要在package.json進行以下配置：

{
  "main": "dist/vue.common.js",
  "module": "dist/vue.esm.js"
}
複製代碼

Vue中的Rollup構建

在閱讀Vue.js源碼時，咱們首先應該去看其package.json文件內容，在Vue.js項目中其精簡掉與compiler、weex和ssr相關的內容之後，以下所示：

{
  "name": "vue",
  "version": "2.6.11",
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "build": "node scripts/build.js"
  }
}
複製代碼

咱們能夠從上面很容易的發現，其精簡後的內容和咱們在rollup基礎知識裏面的配置十分類似，其構建腳本一樣放置在scripts目錄下。在scripts目錄下，咱們須要重點關注下面幾個文件：

  • alias.js：與rollup構建別名相關的配置。
  • config.js：與rollup構建不一樣版本相關的代碼。
  • build.js：rollup構建不一樣壓縮版本Vue.js文件相關代碼。

alias別名

咱們在開發Vue應用時，常常會用到@別名，其中@表明src目錄：

// 使用別名
import HelloWorld from '@/components/HelloWorld.vue'

// 至關於
import HelloWorld from 'src/components/HelloWorld.vue'
複製代碼

在scripts/alias.js中，咱們能夠發現其別名配置代碼以下：

const path = require('path')
const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}
複製代碼

以core別名爲例，在Vue.js源碼中，咱們經過別名進行以下引入：

// 使用core別名
import Vue from 'core/instance/index.js'

// 至關於
import Vue from 'src/core/instance/index.js'
複製代碼

其中alias.js文件是在config.js中引入並使用的：

// config.js文件
import alias from 'rollup-plugin-alias'
import aliases from './alias.js'

function genConfig () {
  const config = {
    plugins: [
      alias(Object.assign({}, aliases))
    ])
  }
  return config
}
複製代碼

注意：因爲Vue.js中使用rollup主版本以及其周邊插件的版本較低，若是你使用了最新的rollup版本或者其周邊的插件，須要按照最新插件的配置要求來，這裏以最新的@rollup/plugin-alias插件爲例：

const path = require('path')
const resolve = p => path.resolve(__dirname, '../', p)

module.exports = [
  { file: 'vue', replacement: resolve('src/platforms/web/entry-runtime-with-compiler') },
  { file: 'compiler', replacement: resolve('src/compiler') },
  { file: 'core', replacement: resolve('src/core') },
  { file: 'shared', replacement: resolve('src/shared') },
  { file: 'web', replacement: resolve('src/platforms/web' },
  { file: 'weex', replacement: resolve('src/platforms/weex') },
  { file: 'server', replacement: resolve('src/server') },
  { file: 'sfc', replacement: resolve('src/sfc') }
]
複製代碼

其在config.js新的使用方式一樣須要作調整，以下：

// config.js文件
import alias from '@rollup/plugin-alias'
import aliases from './alias.js'

function genConfig () {
  const config = {
    plugins: [
      alias({ entries: aliases })
    ])
  }
  return config
}
複製代碼

config.js

首先咱們從package.json打包命令中能夠看到，在development環境下它經過-c指定了rollup的配置文件，因此會使用到scripts/config.js文件，而且打包命令還提供了一個叫作TARGET的環境變量：

{
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
  }
}
複製代碼

那麼在scripts/config.js文件下，咱們能夠看到它是經過module.exports導出的一個對象：

function genConfig (name) {
  const opts = builds[name]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      flow(),
      alias(Object.assign({}, aliases, opts.alias))
    ].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      name: opts.moduleName || 'Vue'
    },
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }
  return config
}
if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
複製代碼

在以上代碼中，咱們能夠看到module.exports導出的對象，主要是經過genConfig()函數返回的，其中這個函數接受的參數正是咱們在打包命令中提供的環境變量TARGET。咱們再來粗略的看一下genConfig()函數，它的主要做用依然是生成rollup幾大核心配置，而後返回配置完畢後的對象。

咱們再來看一個叫作builds的對象，因爲在源碼中它的內容很是多，爲了節省篇幅咱們精簡後其代碼以下：

const builds = {
  // Runtime+compiler CommonJS build (CommonJS)
  'web-full-cjs-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.dev.js'),
    format: 'cjs',
    env: 'development',
  },
  'web-full-cjs-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.prod.js'),
    format: 'cjs',
    env: 'production'
  },
  // Runtime+compiler ES modules build (for bundlers)
  'web-full-esm': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.js'),
    format: 'es'
  },
  // 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'
  },
  // Runtime+compiler production build (Browser)
  'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production'
  }
}
複製代碼

咱們能夠發現它的鍵名正好是咱們打包命令中提供的環境變量TARGET的值，這裏以web-full-dev爲例，它經過web-full-dev這個鍵能夠獲得一個對象：

{
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development'
}
複製代碼

而後配合resolve函數和上面咱們已經提到過的別名配置，就能夠構造下面這樣的rollup配置對象：

{
  // 省略其它
  input: 'src/platforms/web/entry-runtime-with-compiler.js',
  output: {
    dest: 'dist/vue.js',
    format: 'umd',
    name: 'Vue'
  }
}
複製代碼

build.js

srcipts/build.js文件的做用就是經過配置而後生成不一樣版本的壓縮文件，其中它獲取配置的方式一樣是在scripts/config.js文件中，其中關鍵代碼爲：

// config.js中導出
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)

// build.js中引入
let builds = require('./config').getAllBuilds()
複製代碼

從入口到構造函數總體流程

總體流程

在以前的介紹中，咱們知道Vue.js內部會根據Web瀏覽器、Weex跨平臺和SSR服務端渲染不一樣的環境尋找不一樣的入口文件，但其核心代碼是在src/core目錄下，咱們這一節的主要目的是爲了搞清楚從入口文件到Vue構造函數執行，這期間的總體流程。

在分析完從入口到構造函數的各個部分的流程後，咱們能夠獲得一份大的流程圖：

initGlobalAPI流程

咱們會在src/core/index.js文件中看到以下精簡代碼：

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
initGlobalAPI(Vue)

export default Vue
複製代碼

在以上代碼中，咱們發現它引入了Vue隨後調用了initGlobalAPI()函數，此函數的做用是掛載一些全局API方法。

initGlobalAPI

咱們首先能在src/core/global-api文件夾下看到以下目錄結構：

|-- global-api        
|   |-- index.js      # 入口文件
|   |-- assets.js     # 掛載filter、component和directive
|   |-- extend.js     # 掛載extend方法
|   |-- mixin.js      # 掛載mixin方法
|   |-- use.js        # 掛載use方法
複製代碼

隨後在index.js入口文件中，咱們能看到以下精簡代碼：

import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { observe } from 'core/observer/index'
import { extend, nextTick } from '../util/index'

export function initGlobalAPI (Vue: GlobalAPI) {
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  Vue.observable = (obj) => {
    observe(obj)
    return obj
  }

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}
複製代碼

咱們能從以上代碼很清晰的看到在index.js入口文件中，會在Vue構造函數上掛載各類全局API函數，其中set、delete、nextTick和observable直接賦值爲一個函數，而其餘幾種API則是調用了一個以init開頭的方法，咱們以initAssetRegisters()方法爲例，它的精簡代碼以下：

// ['component','directive', 'filter']
import { ASSET_TYPES } from 'shared/constants'

export function initAssetRegisters (Vue: GlobalAPI) {
  ASSET_TYPES.forEach(type => {
    Vue[type] = function () {
      // 省略了函數的參數和函數實現代碼
    }
  })
}
複製代碼

其中ASSET_TYPES是一個定義在src/shared/constants.js中的一個數組，而後在initAssetRegisters()方法中遍歷這個數組，依次在Vue構造函數上掛載Vue.component()、Vue.directive()和Vue.filter()方法，另外三種init開頭的方法調用掛載對應的全局API是同樣的道理：

// initUse
export function initUse(Vue) {
  Vue.use = function () {}
}

// initMixin
export function initMixin(Vue) {
  Vue.mixin = function () {}
}

// initExtend
export function initExtend(Vue) {
  Vue.extend = function () {}
}
複製代碼

最後，咱們發現還差一個Vue.compile()方法，它實際上是在runtime+compile版本纔會有的一個全局方法，所以它在src/platforms/web/entry-runtime-with-compile.js中被定義：

import Vue from './runtime/index'
import { compileToFunctions } from './compiler/index'
Vue.compile = compileToFunctions
export default Vue
複製代碼

所以咱們根據initGlobalAPI()方法的邏輯，能夠獲得以下流程圖： initGlobalAPI流程圖

initMixin流程

在上一節咱們講到了initGlobalAPI的總體流程，這一節，咱們來介紹initMixin的總體流程。首選，咱們把目光回到src/core/index.js文件中：

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
initGlobalAPI(Vue)

export default Vue
複製代碼

咱們發現，它從別的模塊中引入了大Vue，那麼接下來咱們的首要任務就是揭開Vue構造函數的神祕面紗。

在看src/core/instance/index.js代碼以前，咱們發現instance目錄結構以下：

|-- instance
|   |-- render-helpers      # render渲染相關的工具函數目錄
|   |-- events.js           # 事件處理相關
|   |-- init.js             # _init等方法相關
|   |-- inject.js           # inject和provide相關
|   |-- lifecycle.js        # 生命週期相關
|   |-- proxy.js            # 代理相關
|   |-- render.js           # 渲染相關
|   |-- state.js            # 數據狀態相關
|   |-- index.js            # 入口文件
複製代碼

能夠看到，目錄結構文件有不少，並且包含的面也很是雜，但咱們如今只須要對咱們最關心的幾個部分作介紹：

  • events.js：處理事件相關，例如：$on，$off，$emit以及$once等方法的實現。
  • init.js：此部分代碼邏輯包含了Vue從建立實例到實例掛載階段的全部主要邏輯。
  • lifecycle.js：生命週期相關，例如：$destroy、$activated和$deactivated。
  • state.js：數據狀態相關，例如：data、props以及computed等。
  • render.js：渲染相關，其中最值得關注的是Vue.prototype._render渲染函數的定義。

在介紹了instance目錄結構的及其各自的做用之後，咱們再來看入口文件，其實入口文件這裏纔是Vue構造函數廬山真面目：

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) {
  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)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue
複製代碼

代碼分析：

  • Vue構造函數其實就是一個普通的函數，咱們只能經過new操做符進行訪問，既new Vue()的形式，Vue函數內部也使用了instanceof操做符來判斷實例的父類是否爲Vue構造函數，不是的話則在開發環境下輸出一個警告信息。
  • 除了聲明Vue構造函數，這部分的代碼也調用了幾種mixin方法，其中每種mixin方法各司其職，處理不一樣的內容。

從以上代碼中，咱們能獲得src/core/instance/index.js文件很是直觀的代碼邏輯流程圖：

instance流程

接下來咱們的首要任務是弄清楚_init()函數的代碼邏輯以及initMixin的總體流程。咱們從上面的代碼發現，在構造函數內部會調用this._init()方法，也就是說：

// 實例化時，會調用this._init()方法。
new Vue({
  data: {
    msg: 'Hello, Vue.js'
  }
})
複製代碼

而後，咱們在init.js中來看initMixin()方法是如何被定義的：

export function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    // 省略代碼
  }
}
複製代碼

咱們能夠發現，initMixin()方法的主要做用就是在Vue.prototype上定義一個_init()實例方法，接下來咱們來看一下_init()函數的具體實現邏輯：

Vue.prototype._init = function (options) {
    const vm = this
    // 1. 合併配置
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

    // 2.render代理
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }

    // 3.初始化生命週期、初始化事件中心、初始化inject，
    // 初始化state、初始化provide、調用生命週期
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm)
    initState(vm)
    initProvide(vm)
    callHook(vm, 'created')

    // 4.掛載
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
複製代碼

由於咱們是要分析initMixin總體流程，對於其中某些方法的具體實現邏輯會在後續進行詳細的說明，所以咱們能夠從以上代碼獲得initMixin的總體流程圖。 initMixin流程

stateMixin流程

stateMixin主要是處理跟實例相關的屬性和方法，它會在Vue.prototype上定義實例會使用到的屬性或者方法，這一節咱們主要任務是弄清楚stateMixin的主要流程。在src/core/instance/state.js代碼中，它精簡後以下所示：

import { set, del } from '../observer/index'
export function stateMixin (Vue) {
  // 定義$data, $props
  const dataDef = {}
  dataDef.get = function () { return this._data }
  const propsDef = {}
  propsDef.get = function () { return this._props }
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  // 定義$set, $delete, $watch
  Vue.prototype.$set = set
  Vue.prototype.$delete = del
  Vue.prototype.$watch = function() {}
}
複製代碼

咱們能夠從上面代碼中發現，stateMixin()方法中在Vue.prototype上定義的幾個屬性或者方法，所有都是和響應式相關的，咱們來簡要分析一下以上代碼：

  • $data和$props：根據以上代碼，咱們發現$data和$props分別是_data和_props的訪問代理，從命名中咱們能夠推測，如下劃線開頭的變量，咱們通常認爲是私有變量，而後經過$data和$props來提供一個對外的訪問接口，雖然能夠經過屬性的get()方法去取，但對於這兩個私有變量來講是並不能隨意set，對於data來講不能替換根實例，而對於props來講它是隻讀的。所以在原版源碼中，還劫持了set()方法，當設置$data或者$props時會報錯：
if (process.env.NODE_ENV !== 'production') {
  dataDef.set = function () {
    warn(
      'Avoid replacing instance root $data. ' +
      'Use nested data properties instead.',
      this
    )
  }
  propsDef.set = function () {
    warn(`$props is readonly.`, this)
  }
}
複製代碼

  • $set和$delete：set和delete這兩個方法被定義在跟instance目錄平級的observer目錄下，在stateMixin()中，它們分別賦值給了$set和$delete方法，而在initGlobalAPI中，也一樣使用到了這兩個方法，只不過一個是全局方法，一個是實例方法。

  • $watch：在stateMixin()方法中，詳細實現了$watch()方法，此方法實現的核心是經過一個watcher實例來監聽。當取消監聽時，一樣是使用watcher實例相關的方法，關於watcher咱們會在後續響應式章節詳細介紹。

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 {
        cb.call(vm, watcher.value)
      } catch (error) {
        handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
      }
    }
    return function () {
      watcher.teardownunwatchFn()
    }
  }
複製代碼

在以上代碼分析完畢後，咱們能夠獲得stateMixin以下流程圖： stateMixin流程

eventsMixin流程

在使用Vue作開發的時候，咱們必定常用到$emit、$on、$off和$once等幾個實例方法，eventsMixin主要作的就是在Vue.prototype上定義這四個實例方法：

export function eventsMixin (Vue) {
  // 定義$on
  Vue.prototype.$on = function (event, fn) {}

  // 定義$once
  Vue.prototype.$once = function (event, fn) {}

  // 定義$off
  Vue.prototype.$off = function (event, fn) {}

  // 定義$emit
  Vue.prototype.$emit = function (event) {}
}
複製代碼

經過以上代碼，咱們發現eventsMixin()所作的事情就是使用發佈-訂閱模式來處理事件，接下來讓咱們先使用發佈-訂閱實現本身的事件中心，隨後再來回顧源碼。

$on的實現

$on方法的實現比較簡單，咱們先來實現一個基礎版本的：

function Vue () {
  this._events = Object.create(null)
}

Vue.prototype.$on = function (event, fn) {
  if (!this._events[event]) {
    this._events[event] = []
  }
  this._events[event].push(fn)
  return this
}
複製代碼

接下來對比一下Vue源碼中，關於$on的實現：

Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
  const vm: Component = this
  if (Array.isArray(event)) {
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$on(event[i], fn)
    }
  } else {
    (vm._events[event] || (vm._events[event] = [])).push(fn)
    // optimize hook:event cost by using a boolean flag marked at registration
    // instead of a hash lookup
    if (hookRE.test(event)) {
      vm._hasHookEvent = true
    }
  }
  return vm
}
複製代碼

代碼分析：

  1. 咱們發如今Vue源碼中，$on方法還接受一個數組event，這實際上是在Vue2.2.0版本之後纔有的，當傳遞一個event數組時，會經過遍歷數組的形式遞歸調用$on方法。
  2. 咱們還發現，全部$on的事件所有綁定在_events私有屬性上，這個屬性實際上是在咱們上面已經提到過的initEvents()方法中被定義的。
export function initEvents (vm) {
  vm._events = Object.create(null)
}
複製代碼

$emit的實現

咱們先來實現一個簡單的$emit方法：

Vue.prototype.$emit = function (event) {
  const cbs = this._events[event]
  if (cbs) {
    const args = Array.prototype.slice.call(arguments, 1)
    for (let i = 0; i < cbs.length; i++) {
      const cb = cbs[i]
      cb && cb.apply(this, args)
    }
  }
  return this
}
複製代碼

接下來，咱們使用$emit和$on來配合測試事件的監聽和觸發：

const app = new Vue()
app.$on('eat', (food) => {
  console.log(`eating ${food}!`)
})
app.$emit('eat', 'orange')
// eating orange!
複製代碼

最後咱們來看Vue源碼中關於$emit的實現：

Vue.prototype.$emit = function (event: string): Component {
  const vm: Component = this
  // ...省略處理邊界代碼
  let cbs = vm._events[event]
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs
    const args = toArray(arguments, 1)
    const info = `event handler for "${event}"`
    for (let i = 0, l = cbs.length; i < l; i++) {
      invokeWithErrorHandling(cbs[i], vm, args, vm, info)
    }
  }
  return vm
}
複製代碼

代碼分析：

  1. 從總體上看，$emit實現方法很是簡單，第一步從_events對象中取出對應的cbs，接着一個個遍歷cbs數組、調用並傳參。
  2. invokeWithErrorHandling代碼中會使用try/catch把咱們函數調用並執行的地方包裹起來，當函數調用出錯時，會執行Vue的handleError()方法，這種作法不只更加友好，並且對錯誤處理也很是有用。

$off的實現

$off方法的實現，相對來講比較複雜一點，由於它須要根據不一樣的傳參作不一樣的事情：

  • 當沒有提供任何參數時，移除所有事件監聽。
  • 當只提供event參數時，只移除此event對應的監聽器。
  • 同時提供event參數和fn回調，則只移除此event對應的fn這個監聽器。

在瞭解了以上功能點後，咱們來實現一個簡單的$off方法：

Vue.prototype.$off = function (event, fn) {
  // 沒有傳遞任何參數
  if (!arguments.length) {
    this._events = Object.create(null)
    return this
  }
  // 傳遞了未監聽的event
  const cbs = this._events[event]
  if (!cbs) {
    return this
  }
  // 沒有傳遞fn
  if (!fn) {
    this._events[event] = null
    return this
  }
  // event和fn都傳遞了
  let i = cbs.length
  let cb
  while (i--) {
    cb = cbs[i]
    if (cb === fn) {
      cbs.splice(i, 1)
      break
    }
  }
  return this
}
複製代碼

接下來，咱們撰寫測試代碼：

const app = new Vue()
function eatFood (food) {
  console.log(`eating ${food}!`)
}
app.$on('eat', eatFood)
app.$emit('eat', 'orange')
app.$off('eat', eatFood)
// 不執行回調
app.$emit('eat', 'orange')
複製代碼

最後咱們來看Vue源碼中關於$off的實現：

Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
  const vm: Component = this
  // all
  if (!arguments.length) {
    vm._events = Object.create(null)
    return vm
  }
  // array of events
  if (Array.isArray(event)) {
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$off(event[i], fn)
    }
    return vm
  }
  // specific event
  const cbs = vm._events[event]
  if (!cbs) {
    return vm
  }
  if (!fn) {
    vm._events[event] = null
    return vm
  }
  // specific handler
  let cb
  let i = cbs.length
  while (i--) {
    cb = cbs[i]
    if (cb === fn || cb.fn === fn) {
      cbs.splice(i, 1)
      break
    }
  }
  return vm
}
複製代碼

$once的實現

關於$once方法的實現比較簡單，能夠簡單的理解爲在回調以後立馬調用$off，所以咱們來實現一個簡單的$once方法：

Vue.prototype.$once = function (event, fn) {
  function onFn () {
    this.$off(event, onFn)
    fn.apply(this, arguments)
  }
  this.$on(event, onFn)
  return this
}
複製代碼

接着咱們對比一下Vue源碼中的$once方法：

Vue.prototype.$once = function (event: string, fn: Function): Component {
  const vm: Component = this
  function on () {
    vm.$off(event, on)
    fn.apply(vm, arguments)
  }
  on.fn = fn
  vm.$on(event, on)
  return vm
}
複製代碼

注意：在源碼中$once的實現是在回調函數中使用fn綁定了原回調函數的引用，在上面已經提到過的$off方法中也一樣進行了cb.fn === fn的判斷。

在實現完以上幾種方法後，咱們能夠獲得eventsMixin以下流程圖： eventsMixin流程

lifecycleMixin流程

和以上其它幾種方法同樣，lifecycleMixin主要是定義實例方法和生命週期，例如：$forceUpdate()、$destroy，另外它還定義一個_update的私有方法，其中$forceUpdate()方法會調用它，所以lifecycleMixin精簡代碼以下：

export function lifecycleMixin (Vue) {
  // 私有方法
  Vue.prototype._update = function () {}

  // 實例方法
  Vue.prototype.$forceUpdate = function () {
    if (this._watcher) {
      this._watcher.update()
    }
  }
  Vue.prototype.$destroy = function () {}
}
複製代碼

代碼分析：

  • _update()會在組件渲染的時候調用，其具體的實現咱們會在組件章節詳細介紹
  • $forceUpdate()爲一個強制Vue實例從新渲染的方法，它的內部調用了_update，也就是強制組件重選編譯掛載。
  • $destroy()爲組件銷燬方法，在其具體的實現中，會處理父子組件的關係，事件監聽，觸發生命週期等操做。

lifecycleMixin()方法的代碼不是不少，咱們也能很容易的獲得以下流程圖：

renderMixin流程

相比於以上幾種方法，renderMixin是最簡單的，它主要在Vue.prototype上定義各類私有方法和一個很是重要的實例方法：$nextTick，其精簡代碼以下：

export function renderMixin (Vue) {
  // 掛載各類私有方法，例如this._c，this._v等
  installRenderHelpers(Vue.prototype)
  Vue.prototype._render = function () {}

  // 實例方法
  Vue.prototype.$nextTick = function (fn) {
    return nextTick(fn, this)
  }
}
複製代碼

代碼分析：

  • installRenderHelpers：它會在Vue.prototype上掛載各類私有方法，例如this._n = toNumber、this._s = toString、this._v = createTextVNode和this._e = createEmptyVNode。
  • _render()：_render()方法會把模板編譯成VNode，咱們會在其後的編譯章節詳細介紹。
  • nextTick：就像咱們以前介紹過的，nextTick會在Vue構造函數上掛載一個全局的nextTick()方法，而此處爲實例方法，本質上引用的是同一個nextTick。

在以上代碼分析完畢後，咱們能夠獲得renderMixin以下流程圖：

下一篇：Vue2.0源碼分析：響應式原理(上)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程