實現乙個迷你版的vue

2021-08-26 08:40:40 字數 1186 閱讀 9192

專案位址

其實vue1和vue2最大的區別就是vue2多了乙個虛擬dom,其他的區別都是很小的。所以理解了vue1的原始碼,就相當於理解了vue2,中間差了乙個虛擬dom的diff演算法

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

mini-vuex

全域性方法

// 繼承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例項化的過程開始 一直跟蹤這條主線 直到結尾為止(一定要打斷點 debugger 我打了100多個斷點才看懂主流程) 各種分枝暫時不要管 等把主線理解清楚了 細枝末節自然不在話下

在vue主線裡和資料雙向繫結有關的有以下幾個模組

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

專案位址 其實vue1和vue2最大的區別就是vue2多了乙個虛擬dom,其他的區別都是很小的。所以理解了vue1的原始碼,就相當於理解了vue2,中間差了乙個虛擬dom的diff演算法 先來科普一下mvvm的概念及原理 mini vuex 全域性方法 繼承minivue 產生乙個新的子類建構函式 ...

手寫實現乙個迷你版的Tomcat

tomcat,這只3腳貓,大學的時候就認識了,直到現在工作中,也常會和它打交道。這是乙隻神奇的貓,今天讓我來抽象你,實現你!tomcat是非常流行的web server,它還是乙個滿足servlet規範的容器。那麼想一想,tomcat和我們的web應用是什麼關係?從感性上來說,我們一般需要把web應...

mvvm實現乙個簡單的vue

vue,基於mvvm模式下的乙個前端框架 mvvm模式下簡單的實現資料 資料劫持 1.是用object.defineproperty 實現資料 2.使用發布訂閱者模式,配合 object.defineproperty,實現資料劫持 資料劫持包括依賴收集和依賴促發 只考慮最簡單的方式,並且沒有包括具體...