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

本文目錄一覽：

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

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

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

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

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

這樣復(fù)用了同一個(gè)對(duì)象所以改寫為,這樣new的時(shí)候可以拿到全新的對(duì)象

因?yàn)閚ew Fn的constructor指向的是Parent，所以Sub.prototype需要重寫

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

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

判斷是不是原始的標(biāo)簽 還是組件的方法

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

npm run build

使用vue-cli創(chuàng)建的項(xiàng)目默認(rèn)導(dǎo)入的是運(yùn)行時(shí)版本并且是ESM模塊化方式

核心： 把會(huì)改變數(shù)組的方法進(jìn)行修補(bǔ)，當(dāng)這些方法被調(diào)用的時(shí)候調(diào)用notify方法，遍歷數(shù)組中的元素，把對(duì)象元素進(jìn)行響應(yīng)式處理

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

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

手把手教你讀Vue2源碼-2

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

這一篇，我們就來(lái)學(xué)習(xí)基本的調(diào)試方法，在上篇中，我們已經(jīng)在test文件夾中創(chuàng)建了一個(gè)測(cè)試文件，我們?cè)跒g覽器中打開這個(gè)文件

1. 初始化new Vue()

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

2. this.init(options)

同樣打上斷點(diǎn)，點(diǎn)擊下一步，會(huì)進(jìn)入init方法

3. this.initMixin

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

4. $mount

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

5. mountComponent

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

6. _render()

_render獲取虛擬dom

7. _update()

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

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

我們?cè)谏弦黄淖詈笾v解了vm._render是生成虛擬dom的關(guān)鍵，那么我們來(lái)看看他是如何生成的，下面是他的源碼

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

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

【手把手教你搓Vue響應(yīng)式原理】（五） Watcher 與 Dep

【手把手教你搓Vue響應(yīng)式原理】（一）初識(shí)Vue響應(yīng)式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

然后，每個(gè)變量都應(yīng)該有屬于自己的 Dep ，因?yàn)槊總€(gè)變量所在的依賴位置是不一樣的，所以他們的訂閱者也不一樣。

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

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

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

我們先按照?qǐng)D例來(lái)創(chuàng)建我們的 Dep 類

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

Dep 我們?cè)谇懊嬉舱f(shuō)了，每個(gè)屬性都應(yīng)該有它自己的 Dep ，用來(lái)管理依賴。

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

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

因?yàn)橛辛? if(Dep.target) 的判斷，所以， 只有綁定 Watcher 的變量觸發(fā) getter 時(shí)，才會(huì)添加依賴 。

這個(gè) Dep.target 其實(shí)就是 Watcher 的實(shí)例

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

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

其實(shí)照道理應(yīng)該有一個(gè)刪除依賴，我們這里就不再擴(kuò)展了。

首先， Watcher 實(shí)例應(yīng)該大家會(huì)相對(duì)而言更加好理解點(diǎn)，因?yàn)?，我們有一個(gè) watch 偵聽(tīng)器，大家一定都很熟悉，這兩個(gè)其實(shí)一樣。

我們先按照?qǐng)D例來(lái)創(chuàng)建我們的 Watcher 類

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

這個(gè) parsePath 需要單獨(dú)拎出來(lái)說(shuō)一下，比方說(shuō)我們現(xiàn)在有這么一個(gè)對(duì)象

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

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

我們將這個(gè)方法命名為 parsePath 。

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

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

【尚硅谷】Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)式原理

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