vue@2.0原始碼學習---目錄結構分析與準備工作

菜菜_張發表於2017-12-18
原文網址 : https://juejin.im/post/5a37862a518825698e7229d4
Vue原始碼

原文地址

前言

網上vue的原始碼分析也蠻多的，不過很多都是1.0版本的並且大多都是在講資料的observe，索性自己看看原始碼，雖然很難但是希望能學到點東西。

原始碼版本為2.0.0

runtime和runtime-with-compiler

有必要了解這兩個概念的區別。我們寫vue程式的時候一般會給出template，但是仔細看過文件的話一定知道vue支援render函式的寫法。runtime版本可直接執行render函式寫法，假如是template寫法，需要先利用compiler解析模板至render函式，再執行render函式渲染。

為了學習起來簡單，選擇先從runtime版本入手，事實上兩者相差的只是一個將模板字串編譯成為 JavaScript 渲染函式的過程。

入口檔案

上面已經說過從runtime版本入手，所以首要任務就是找到runtime版本的入口檔案。

img

點開entries目錄下的web-runtime.js，發現確實是匯出了一個Vue建構函式。先寫一個例子跑起來試試

import Vue from '../src/entries/web-runtime.js'

window.app = new Vue({
    data: {
        msg: 'hello',
    },
    render (h) {
      return h('p', this.msg)
    }
}).$mount('#root')

複製程式碼

簡單的寫個webpack配置檔案

'use strict'
const path = require('path')
const webpack = require('webpack')

module.exports = {
  watch: true,
  entry: {
    app: './index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js'],
    alias: {
        vue: path.resolve(__dirname, '../src/entries/web-runtime-with-compiler'),
        compiler: path.resolve(__dirname, '../src/compiler'),
        core: path.resolve(__dirname, '../src/core'),
        shared: path.resolve(__dirname, '../src/shared'),
        web: path.resolve(__dirname, '../src/platforms/web'),
        server: path.resolve(__dirname, '../src/server'),
        entries: path.resolve(__dirname, '../src/entries'),
        sfc: path.resolve(__dirname, '../src/sfc')
    }
  },
  module: {
    rules: [
        { test: /\.js$/, loader: "babel-loader", include: [path.resolve(__dirname, '../src')] }
    ]
  }
}
複製程式碼

注意配置一下extensions和alias，由於vue的原始碼編寫時新增了型別檢測（flow.js），所以需要在babel中新增外掛transform-flow-strip-types

webpack打包一下開啟瀏覽器，hello映入眼簾。
至此，準備工作結束

擴充套件全域性方法和例項方法

點開web-runtime.js可以發現Vue是從core/index.js匯入的，程式碼如下：

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

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, '$isServer', {
  get: () => config._isServer
})

Vue.version = '2.0.0'

export default Vue
複製程式碼

又發現Vue是從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) {
  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關鍵字例項化
  • 例項的初始化操作

定義了建構函式之後，執行了五個函式，這五個函式擴充套件了Vue 的原型，也即定義了一些例項方法。

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this

...
複製程式碼

再回過頭看initGlobalAPI(Vue)，它給Vue建構函式擴充套件了一些方法

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      util.warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)
  Vue.util = util
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = util.nextTick

  Vue.options = Object.create(null)
  config._assetTypes.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  util.extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}
複製程式碼
export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    Vue.options = mergeOptions(Vue.options, mixin)
  }
}
複製程式碼

具體的邏輯後文看。

相關文章