vue框架主要流程分析
目標
- 調試環境搭建
- 理順vue源碼學習整體流程
- 數據響應式
獲取
- 遷出項目: git clone https://github.com/vuejs/vue.git
環境
安裝依賴
安裝rollup
rollup是打包工具，用於打包純代碼項目
npm i rollup -g
修改dev腳本，添加surcemap,package.json文件
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-
full-dev",
此時在dist文件夾下生成一個可進行調試的vue.js文件
運行
- npm run dev
- 引入前面創建的vue.js
文件夾
- dist
-
common commonjs老版本的打包工具 webpack1、
browserify 符合require
-
esm 現代打包工具es6模塊化 版本 webpack2等
-
umd 兼容cjs（服務器）和amd（瀏覽器）
-
runtime 僅包含運行時 （沒有編譯器，打包後預編譯了）
-
- examples測試代碼
- flow 類型聲明
- packages 獨立於核心代碼以外的模塊
- scripts 打包腳本
- src 源碼目錄
- compiler 編譯器
- core 核心
- plateforms 平臺特殊的 瀏覽器 移動端weex
- server 編譯器
- sfc 單文件解析器
- shared 幫助代碼
- types ts的類型聲明 和flow對應目錄 專門給flow寫的
- 同上
入口
- dev腳本中 -c scripts/config.js 指明配置文件所在 參數
- TARGET:web-full-dev 指明輸出文件配置項
初始化流程
- 入口 platforms/web/entry-runtime-with-compiler.js
- 擴展默認$mount方法:處理template或el選項，嘗試編譯他們爲render函數
- render > template > el
- platforms/web/runtime/index.js
- 定義$mount:掛載根組件到指定宿主元素(mountComponent(this, el, hydrating))
- 定義__patch__:補丁函數，執行patching算法進行更新
- core/index.js 實現全局api，具體如下
Vue.set \= set
Vue.delete \= del
Vue.nextTick \= nextTick
initUse(Vue) // 實現Vue.use函數
initMixin(Vue) // 實現Vue.mixin函數
initExtend(Vue) // 實現Vue.extend函數
initAssetRegisters(Vue) // 註冊實現Vue.component/directive/filter
- core/instance/index.js Vue構造函數定義，實例api定義
function Vue (options) { // 構造函數僅執行了\_init this.\_init(options)
}
initMixin(Vue) // 實現init函數
stateMixin(Vue) // 狀態相關api $data,$props,$set,$delete,$watch eventsMixin(Vue)// 事件相關api $on,$once,$off,$emit lifecycleMixin(Vue) // 生命週期api \_update,$forceUpdate,$destroy renderMixin(Vue)// 渲染api \_render,$nextTick
- core/instance/init.js 創建組件實例，初始化其數據、屬性、事件等
initLifecycle(vm) // $parent,$root,$children,$refs initEvents(vm) // 處理父組件傳遞的監聽器
initRender(vm) // $slots,$scopedSlots,\_c,$createElement callHook(vm, 'beforeCreate')
initInjections(vm) // 獲取注入數據
initState(vm) // 初始化props，methods，data，computed，watch initProvide(vm) // 提供數據注入
callHook(vm, 'created')
- mountComponent core/instance/lifecycle.js執行掛載，測試代碼
<div id\="app"\> <h2>vue初始化</h2>
</div>
<script src\="../../dist/vue.js"\></script>
<script>
new Vue({
el: '#app'
})
</script>
數據響應式
Vue一大特點是數據響應式，數據的變化會作用於UI而不用進行DOM操作。原理上來講，是利用了JS語 言特性Object.defineProperty()，通過定義對象屬性setter方法攔截對象屬性變更，從而將數值的變化 轉換爲UI的變化。
具體實現是在Vue初始化時，會調用initState，它會初始化data，props等，這裏着重關注data初始 化，
入口
src\core\instance\state.js初始化數據
實例
core/observer/index.js observe方法返回一個Observer實例
響應化操作
- core/observer/index.js
- Observer對象根據數據類型執行對應的響應化操作
- defineReactive給data中每一個key定義數據的劫持（定義對象屬性的getter/setter），getter負責添加依賴，setter負責通知更新
- core/observer/dep.js維護管理若干watcher
Watcher
Watcher解析一個表達式並收集依賴，當數值變化時觸發回調函數，常用於$watch API和指令中。 每個組件也會有對應的Watcher，數值變化會觸發其update函數導致重新渲染
export default class Watcher {
constructor () {}
get () {}
addDep (dep: Dep) {}
update () {}
}
數組響應化
數組數據變化的偵測跟對象不同，我們操作數組通常使用push、pop、splice等方法，此時沒有辦法得 知數據變化。所以vue中採取的策略是攔截這些方法並通知dep。
- src\core\observer\array.js 爲數組原型中的7個可以改變內容的方法定義攔截器
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto) //數組的原型對象 進行了克隆 經過攔截了的數組
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
- Observer中覆蓋數組原型
if (Array.isArray(value)) {
// 替換數組原型
protoAugment(value, arrayMethods) // value.\_\_proto\_\_ = arrayMethods this.observeArray(value)
}
- 額外的任務 進行通知
const ob = this.__ob__
let inserted
// 以下三個操作需要額外的響應化處理
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
理解響應式原理的實現，我們可以知道以下注意事項:
- 對象各屬性初始化時進行一次響應化處理，以後再動態設置是無效的
data: {obj:{foo: 'foo'}}
// 無效
this.obj.bar \= 'bar'
// 有效
this.$set(this.obj, 'bar', 'bar')
- 數組是通過方法攔截實現響應化處理，不通過方法操作數組也是無效的
data: {items: \['foo','bar'\]}
// 無效
this.items\[0\] \= 'tua' this.items.length \= 0
// 有效
this.$set(this.items, 0, 'tua') this.items.splice(0, 2)