本篇文章給大家談?wù)剉ue源碼分析視頻教程，以及vue源碼解析 github對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、Vue 組件創(chuàng)建的流程源碼分析
• 2、Vue.js 源碼剖析-響應式原理、虛擬 DOM、模板編譯和組件化
• 3、手把手教你讀Vue2源碼-2
• 4、vue源碼分析三 -- vm._render()如何生成虛擬dom
• 5、【手把手教你搓Vue響應式原理】（五） Watcher 與 Dep

Vue 組件創(chuàng)建的流程源碼分析

注冊組件第二個參數(shù)默認會調(diào)用extend,Vue.extend 使用Vue基礎(chǔ)構(gòu)造器 產(chǎn)生子類

Vue.extend() 中data必須是一個函數(shù)，繼承與Vue,可以new和掛載

Vue.component("",Vue.extend({})) //傳入的是對象

這樣復用了同一個對象所以改寫為,這樣new的時候可以拿到全新的對象

因為new Fn的constructor指向的是Parent，所以Sub.prototype需要重寫

———————————————— 分割線 ————————————————————

所以在createElement，需要對組件進行處理（要區(qū)分組件和普通元素去創(chuàng)建虛擬節(jié)點）

判斷是不是原始的標簽 還是組件的方法

Vue.js 源碼剖析-響應式原理、虛擬 DOM、模板編譯和組件化

npm run build

使用vue-cli創(chuàng)建的項目默認導入的是運行時版本并且是ESM模塊化方式

核心： 把會改變數(shù)組的方法進行修補，當這些方法被調(diào)用的時候調(diào)用notify方法，遍歷數(shù)組中的元素，把對象元素進行響應式處理

Watcher分為三類，Computed Watcher， 用戶Watcher(監(jiān)聽器)，渲染W(wǎng)atcher

模板編譯的主要目的是將模板轉(zhuǎn)換為渲染函數(shù)

手把手教你讀Vue2源碼-2

在上一篇中，我們已經(jīng)學習了怎么搭建環(huán)境和查找入口文件、vue初始化方法

這一篇，我們就來學習基本的調(diào)試方法，在上篇中，我們已經(jīng)在test文件夾中創(chuàng)建了一個測試文件，我們在瀏覽器中打開這個文件

1. 初始化new Vue()

test1.html文件中在初始化app處打斷點，按F11走下一步查看，可以看到進入到我們Vue構(gòu)造函數(shù)，調(diào)用了init方法

2. this.init(options)

同樣打上斷點，點擊下一步，會進入init方法

3. this.initMixin

在init方法，初始化了各種屬性。我們將斷點打在合并options的位置，查看一下options合并前后有什么差別：

4. $mount

繼續(xù)，將斷點打到mount方法

5. mountComponent

聲明了updateComponent，創(chuàng)建了Watcher

6. _render()

_render獲取虛擬dom

7. _update()

_update把虛擬dom轉(zhuǎn)為真實dom

vue源碼分析三 -- vm._render()如何生成虛擬dom

我們在上一篇的最后講解了vm._render是生成虛擬dom的關(guān)鍵，那么我們來看看他是如何生成的，下面是他的源碼

createElement在文件../vdom/create-element里面，下面是他的源碼

new Vnode 創(chuàng)建的是一個虛擬dom，其實就是一個裝有很多屬性的對象，和真實的dom做一個映射，目的是去渲染真實的dom，那么為什么不直接去渲染dom，因為vue中dom不僅有create的過程，還有diff,patch的過程。為了使得diff的過程花費的時間更短，虛擬dom就出來了，下面我們來看看new Vnode的源碼

【手把手教你搓Vue響應式原理】（五） Watcher 與 Dep

【手把手教你搓Vue響應式原理】（一）初識Vue響應式

【手把手教你搓Vue響應式原理】（二）深度監(jiān)測對象全部屬性

【手把手教你搓Vue響應式原理】（三）observe 以及 ob

【手把手教你搓Vue響應式原理】（四） 數(shù)組的響應式處理

之前已經(jīng)將數(shù)據(jù)劫持已經(jīng)全部完成了。

那么，接下來，主要的要點就是在于兩點，依賴收集和觸發(fā)依賴更新。

它的意義主要在于控制哪些地方使用了這個變量，然后，按照最小的開銷來更新視圖 。

首先，要先明白，依賴是什么，比方說在我們的模板中有 {{a}} ，那么，這個地方就有對于變量 a 的依賴。

在模板編譯的時候，就會觸發(fā) a 變量的 getter 。

然后，當我們執(zhí)行 a++; 的時候，那么，我們就要觸發(fā)依賴的更新，當初模板中 {{a}} 的地方，就要更新，是吧！

所以，我們都是 在 getter 中收集依賴，在 setter 中觸發(fā)依賴更新 。

這一節(jié)的內(nèi)容，主要就是用來專門講清楚這兩件事情。

依賴收集和觸發(fā)依賴更新主要由兩個類來完成， Dep 和 Watcher 。

Dep 和 Watcher 在設(shè)計模式中，就是 發(fā)布-訂閱者 的模式。

而依賴，你可以理解為所謂的訂閱者。

Dep 說白了就是發(fā)布者,它的工作就是依賴管理，要知道哪些地方用到了這個變量，可能用到這個變量的地方有很多，所以，它會有多個訂閱者。

然后，每個變量都應該有屬于自己的 Dep ，因為每個變量所在的依賴位置是不一樣的，所以他們的訂閱者也不一樣。

然后在變量更新之后，就去通知所有的訂閱者（Watcher），我的變量更新了，你們該觸發(fā)視圖更新了。

Watcher 說白了就是訂閱者，它接受 Dep 發(fā)過來的更新通知之后，就去執(zhí)行視圖更新了。

它其實就是所謂的 watch 監(jiān)聽器，變量改變之后，執(zhí)行一個回調(diào)函數(shù)。

我們先按照圖例來創(chuàng)建我們的 Dep 類

根據(jù)我們的需求:

Dep 我們在前面也說了，每個屬性都應該有它自己的 Dep ，用來管理依賴。

所以，首先，如果我們在 Observer 中創(chuàng)建 Dep，那不就可以了。畢竟 Observer 會遍歷到每一個對象。

所以，很明顯，我們可以在 defineReactive 的 get 中收集依賴

因為有了 if(Dep.target) 的判斷，所以， 只有綁定 Watcher 的變量觸發(fā) getter 時，才會添加依賴 。

這個 Dep.target 其實就是 Watcher 的實例

所以，很明顯，我們可以在 defineReactive 的 set 中收調(diào)用 notify() 方法告知 Watcher 實例，數(shù)據(jù)更新了。

至此， Dep 的所有職責，我們已經(jīng)幫它完成了。

其實照道理應該有一個刪除依賴，我們這里就不再擴展了。

首先， Watcher 實例應該大家會相對而言更加好理解點，因為，我們有一個 watch 偵聽器，大家一定都很熟悉，這兩個其實一樣。

我們先按照圖例來創(chuàng)建我們的 Watcher 類

根據(jù)我們的需求:

這個 parsePath 需要單獨拎出來說一下，比方說我們現(xiàn)在有這么一個對象

我們要監(jiān)聽到 a.b.c.d ，所以，我們需要下面的這種格式

所以，這個 get 很明顯就有點難度了。 我們需要通過循環(huán) 拿到 a.b 然后 .c 然后 .d。

我們將這個方法命名為 parsePath 。

入?yún)⒔邮芪覀兊? b.c.d ，我們可以看到 第一句執(zhí)行之后 segments=['b','c','d'] ，然后進行第二層，這是返回了一個方法，按照循環(huán)，那就是 obj=obj.b = obj=obj.c = obj=obj.d ，所以，就是返回一個對象的 obj.b.c.d，相當于是遍歷字符串中的屬性樹。

在執(zhí)行 a.b.c.d=55; 的同時，我們的控制臺就會輸出 ok 55 10 。

【尚硅谷】Vue源碼解析之數(shù)據(jù)響應式原理

關(guān)于vue源碼分析視頻教程和vue源碼解析 github的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。