2. 程式人生 > >Vue.js 原始碼解析

Vue.js 原始碼解析

阿新 • • 發佈：2018-11-14

介紹

Vue.js原始碼分析，記錄了個人學習Vue.js原始碼的過程中的一些心得以及收穫。以及對於Vue框架，周邊庫的一些個人見解。

在學習的過程中我為Vue.js（2.3.0）、Vuex（2.4.0）、Vue-router（3.0.1）加上了註釋，分別在資料夾vue-src、vuex-src以及vue-router-src中，希望可以幫助有需要的同學更好地學習理解Vue.js及周邊庫的原始碼。

感謝尤大提高生產力。

本專案希望對Vue.js做更進一步的探索與學習，Vue.js基礎內容請參考Vue.js官網，https://cn.vuejs.org/v2/guide/。 可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。

目錄

原始碼相關

Vue.js響應式原理

Vue.js依賴收集

從Vue.js原始碼角度再看資料繫結

Vue.js事件機制

VNode節點(Vue.js實現)

Virtual DOM與diff(Vue.js實現)

聊聊Vue.js的template編譯

Vue.js非同步更新DOM策略及nextTick

從template到DOM（Vue.js原始碼角度看內部執行機制）

Vuex原始碼解析

聊聊keep-alive元件的使用及其實現原理

隨筆雜談

Vue元件間通訊

說說element元件庫broadcast與dispatch

對於新手同學

由於以上內容都是針對 Vue.js 原始碼進行講解了，可能有一些不太熟悉原始碼的同學讀起來感覺晦澀難懂。

筆者撰寫的《剖析 Vue.js 內部執行機制》或許可以幫到你。

 

原文https://github.com/answershuto/learnVue

相關推薦

Vue.js 原始碼解析

介紹 Vue.js原始碼分析，記錄了個人學習Vue.js原始碼的過程中的一些心得以及收穫。以及對於Vue框架，周邊庫的一些個人見解。 在學習的過程中我為Vue.js（2.3.0）、Vuex（2.4.0）、Vue-router（3.0.1）加上了註釋，分別在資料夾vue-src、vuex-sr

Vue.js原始碼解析(九)【從template到DOM（Vue.js原始碼角度看內部執行機制）】

從new一個Vue物件開始 let vm = new Vue({ el: '#app', /*some options*/ }); 很多同學好奇，在new一個Vue物件的時候，內部究竟發生了什麼？ 究竟Vue.js是如何將data中的資

Vue.js原始碼解析(八)【Vue.js非同步更新DOM策略及nextTick】

操作DOM 在使用vue.js的時候，有時候因為一些特定的業務場景，不得不去操作DOM，比如這樣： <template> <div> <div ref="test">{{test}}</div>

最新Vue.js 原始碼全方位深入解析分享

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件1-6 Vue.js

Vue.js 原始碼全方位深入解析(完整版)

. 第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文

Vue.js 原始碼全方位深入解析(已完結)

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件

某課實戰Vue.js 原始碼全方位深入解析

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件

某網Vue.js 原始碼全方位深入解析(完整版)

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-

Vue.js 原始碼全方位深入解析

10-1 keep-alive（1） 10-2 keep-alive（2） 10-3 keep-alive（3） 10-4 keep-alive（4） 10-5 keep-alive（5） 10-6 keep-alive（6） 10-7 transition（1） 10-8 tra

某課網 - Vue.js 原始碼全方位深入解析（完整版）

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件1-6 Vue.js 原始碼目錄設計1

Vue.js 原始碼全方位深入解析 學精學透 Vue 原理實現

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件1-

Vue.js解析(三)【從Vue.js原始碼角度再看資料繫結】

資料繫結原理 前面已經講過Vue資料繫結的原理了，現在從原始碼來看一下資料繫結在Vue中是如何實現的。 首先看一下Vue.js官網介紹響應式原理的這張圖。 這張圖比較清晰地展示了整個流程，首先通過一次渲染操作觸發Data的getter（這裡保證只有檢視

某課網 慕課 Vue.js 原始碼全方位深入解析 實戰課程 (6-7章 原始碼在此章節)

完整點這裡第6章 編譯（上）從編譯的入口函式開始，分析了編譯的三個核心流程的實現：parse -> optimize -> codegen。6-1 編譯6-2 編譯入口（上）6-3 編譯入口（下）6-4 parse（1）6-5 parse（2）6-6 parse（3）6-7 parse（4）6-8

某網Vue.js 原始碼全方位深入解析(實戰篇)

第1章 準備工作介紹了 Flow、Vue.js 的原始碼目錄設計、Vue.js 的原始碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。1-1 課程簡介1-2 準備工作1-3 認識 Flow-文件1-4 認識 Flow1-5 Vue.js 原始碼目錄設計-文件

複製到剪下板外掛clipboard.js原始碼解析

clipboard.js 是一個小型的複製到剪下板外掛，只有3kb，非flash 前言 公司專案有用到clipboard.js，由於好奇心順手點開了原始碼看看其究竟是如何實現的，本以為是九曲十八彎錯綜複雜，其實還是挺容易看懂的，所以就分享下讀後感哈哈。 本篇讀後感分為四部分，分別為前言、解析、

Vue.js原始碼 生命週期 LifeCycle 學習

callHook 。  我們來看看 callHook 程式碼： export function callHook (vm: Component, hook: string) {   const handlers = vm.$options[hook] // 獲取Vue選項中的

10分鐘快速精通rollup.js——Vue.js原始碼打包原理深度分析

前言 本教程是rollup.js系列教程的最後一篇，我將基於目前非常流行的Vue.js框架，深度分析Vue.js原始碼打包過程，讓大家深入理解複雜的前端框架是如何利用rollup.js進行打包的。通過這一篇教程的學習，相信大家可以更好地應用rollup.js為自己的專案服務。 說明：本教程基於Vue

從template到DOM(Vue.js原始碼角度看內部執行機制)

寫在前面 這篇文章算是對最近寫的一系列Vue.js原始碼的文章(https://github.com/answershuto/learnVue)的總結吧，在閱讀原始碼的過程中也確實受益匪淺，希望自己的這些產出也會對同樣想要學習Vue.js原始碼的小夥伴有所幫助。之前這篇文章同樣在我司（大搜車）的

Vue.js原始碼——事件機制

寫在前面 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。 文章的原地址：https://github.com/answershuto/learnVue。 在學習過程中，為Vue加上了中文的註釋https:/

從Vue.js原始碼看非同步更新DOM策略及nextTick

寫在前面 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。 文章的原地址：https://github.com/answershuto/learnVue。 在學習過程中，為Vue加上了中文的註釋https:/