項目位址

Vue1和Vue2的差別

其實Vue1和Vue2最大的差別就是Vue2多了一個虛拟DOM，其他的差別都是很小的。是以了解了Vue1的源碼，就相當于了解了Vue2，中間差了一個虛拟DOM的Diff算法

文檔

• 資料雙向綁定
• Vue主流程走向
• 元件
• nextTick異步更新

MVVM

先來科普一下MVVM的概念及原理

配套插件

mini-vuex

實作一個迷你版的vue

實作的功能

全局方法

// 繼承MiniVue 産生一個新的子類構造函數
MiniVue.extend
// 在執行個體化過程完成後運作
MiniVue.nextTick
// 注冊自定義指令
MiniVue.directive
// 過濾器
MiniVue.filter 
// 元件 包括slot props
MiniVue.component
// 插件
MiniVue.use
// 混入
MiniVue.mixin
           

mixin filter component也可以局部注冊 在new一個執行個體時提供以下選項即可

filters
components
mixin
           

執行個體方法

vm.$watch
vm.$set
vm.$delete
vm.$on
vm.$once
vm.$off
vm.$emit
vm.$nextTick
           

指令

v-text
v-html
v-show
v-if
v-else
v-for
v-on
v-bind
v-model
           

計算屬性

計算屬性用法也和Vue一樣

生命周期

init
created
beforeCompiled
compiled
destroyed
           

以上實作的功能用法和Vue一模一樣

如何閱讀源碼

閱讀源碼要帶有目的去看 不能毫無目的的去看源碼 以免掉進無盡的細節陷阱中而出不來

Vue源碼要怎麼看呢

建議從一個Vue執行個體化的過程開始 一直跟蹤這條主線 直到結尾為止(一定要打斷點 debugger 我打了100多個斷點才看懂主流程) 各種分枝暫時不要管 等把主線了解清楚了 細枝末節自然不在話下

Vue1.0子產品

在Vue主線裡和資料雙向綁定有關的有以下幾個子產品

• Vue構造函數
• 觀察者observer
• 觀察者watcher
• 指令系統 directive類和directives指令函數集合
• DOM解析compile
• watcher與observer之間的聯系者dep

我們來看看他們之間的關系

如果不是想自己實作一個mvvm架構 Vue的源碼不用細讀 隻要明白主線的運作過程就行了 想要熟練使用Vue看官方文檔即可

想了解主線流程的 可以看看我的v0.1版本 300行代碼 完整的實作了雙向資料綁定的流程 還有3條指令的實作過程 其實其他的指令即使沒實作 也沒什麼關系 主流程明白即可

MiniVue v0.1

學習Vue源碼推薦看這篇文章