迷你版Vue--學習如何造一個Vue輪子

時間 2019-12-06

標籤迷你 vue 學習如何一個輪子简体版

原文原文鏈接

項目地址html

Vue1和Vue2的區別

其實Vue1和Vue2最大的區別就是Vue2多了一個虛擬DOM，其餘的區別都是很小的。因此理解了Vue1的源碼，就至關於理解了Vue2，中間差了一個虛擬DOM的Diff算法vue

文檔

MVVM

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

配套插件

mini-vuexgithub

實現一個迷你版的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如出一轍

如何閱讀源碼

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

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.1mvvm