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

isLishude 發布于2019-08-23 14:17 / 1744人閱讀

摘要：項目地址和的區別其實和最大的區別就是多了一個虛擬，其他的區別都是很小的。

項目地址

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源碼推薦看這篇文章

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100405.html

用Vue自己造個組件輪子，以及實踐背后帶來的思考

摘要：用造個組件輪子吧閏土大叔如果你掌握了的組件知識，相關的指令事件，花點時間你也可以造出這么個入門級的小輪子。接下來，拋出造輪子實踐背后帶來的一些思考。以上三部分內容構成了的整個執行過程。 showImg(https://segmentfault.com/img/bV1Tnu?w=754&h=500); 前言首先，向大家說聲抱歉。由于之前的井底之蛙，誤認為Vue.js還遠沒有覆蓋到二三線...

icyfire 2019-08-22 13:45 評論0 收藏0
前端--通用知識 - 收藏集 - 掘金

摘要：閉包有多重前端知識點大百科全書前端掘金，，技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 Vue全家桶實現還原豆瓣電影wap版 - 掘金用vue全家桶仿寫豆瓣電影wap版。最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發過程特別難受。于是玩一玩本項目，算是對相關技術更加熟悉了。原計劃仿寫完所有頁面，礙于豆瓣的接口API有限，實現頁面也有...

王笑朝 2019-08-20 16:57 評論0 收藏0
作為前端開發，如何寫好一個簡歷

摘要：項目地址需求來源通常在各個招聘網站，我們填寫完一些信息后，網站就可以幫助我們生成一個很不錯的簡歷。但是作為一名開發者，尤其是前端開發者，可能對這種簡歷并不滿意。，前端開發神器。最后，為了保護隱私。背景前一陣子，閑下來便開始著手做一個一直想做的東西--resume。經過幾天業余時間的折騰，終于做出了一番模樣。Github項目地址：https://github.com/eternity...

abson 2019-08-29 11:14 評論0 收藏0