Vue 原理解析概述 (1)

4 min readFeb 10, 2019

開始 Vue 建構配置

前言

開始用Vue開發快9個月，履歷上自顧地寫著熟悉Vue以及其生態系，如果不知道Vue背後生成原理，還能安心的在履歷上寫著熟悉兩個字嗎? 因此我開始趁這開始新工作的一個禮拜前，好好的把所有原理重新Review一次。

因為是概述，所以文章會著重在於重點以及流程，不會到更深入的源碼研究，但至少會把源碼的位置貼出來，如有講錯歡迎指正。

開始前

首先把咱們Vue的github開起來，看是要clone到本地或是用octotree 方便查找源碼位置，再搭配本文章服用。

那就開始吧!!!

在Vue開始之前，Vue的建構配置

flow & rollup

首先得提到這兩個Vue使用的第三方Library，第一個是 Flow，一個 facebook推出的靜態類別檢查工具，也就是對 javascript 做型別檢查，這時我就想說幹嘛不用 typescript 而UUC大大也開釋了:

Vue 2 一开始内部实现就有类型系统，但是没想到 Flow 烂尾了，而 TS 整个生态越做越好。这个属于就是押错宝了，只能说… 真香 。
Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript？

第二個 Rollup 打包工具，在源碼檔案中 script/build.js 可以看到引用了 rollup進行打包配置，在 scripts/config.js 可以看到設定，裡面基本上就是對不同的npm run build 進行不同的打包方案，可以看到還有SSR、Weex等。

Vue.js 1.0.10改用rollup来打包的优势，对使用Vue.js的用户来讲会有什么影响？

2. Runtime Only VS Runtime + Compiler

https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

當使用vue-cli時會問你Runtime Only or Runtime + Compiler(standalone)，這兩者差別就在於有沒有模板的編譯器，由官方文件上可看到比較，主要就是render函式差別

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

而這個函式在後面也會詳細介紹，Runtime Only 文件較輕量，官方文件上也推薦使用這個，但 vue-cli 選項卻推薦使用有編譯器的版本，這是怎樣的巫術。

3. import Vue from ‘vue’ 一切都從這裡開始

當你把 Vue 引用進來後，這裡就是引用入口，然後看到裡面引用了 import Vue from ‘./runtime/index’ 繼續挖，在./runtime/index 找到了 import Vue from ‘core/index’ 核心就快挖到了，看到/core/index 裡面有著

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

終於提煉再提煉，在./instance/index 找到了定義全部方法的地方

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'

包括了事件、狀態、渲染、生命週期等等的定義，而剛剛的 initGlobalAPI 則是在 core/global-api/index.js 裡面，主要是做一些擴展全局API方法的定義，可以在官方全局API裡面找到，在這邊就不多說了。

總結

Vue主要兩個第三方庫，flow & rollup，再來開始vue init 後vue的建構配置，有無編譯器的差別，生成template之後，最後 import Vue from ‘vue’ 到底引用了什麼進來，一層一層的剝開vue的心。

Vue 原理解析概述 (1)

前言

開始前

那就開始吧!!!

在Vue開始之前，Vue的建構配置

總結

Written by PY