今天給各位分享vue源碼解析視頻的知識，其中也會對vuex源碼解析進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、Vue源碼系列之生命鉤子beforeCreate&created
• 2、asyncComputed源碼解析
• 3、vue-quill-editor 巧妙解決視頻樣式問題
• 4、Vue源碼系列之生命鉤子beforeUpdate&updated

Vue源碼系列之生命鉤子beforeCreate&created

在實習面試中，Vue相關被問到最多的就是圍繞生命周期函數(shù)內部所作的一些操作，很多朋友可能了解的就是官網(wǎng)的下圖，有時候倒霉遇上硬核點的面試官，深入問些東西就會被懟的啞口無言，本文就是在之前源碼的基礎上，分析一下，生命周期函數(shù)究竟發(fā)生了什么

先上圖

在分析每個鉤子之間究竟干了什么之前，先來看看鉤子是怎么觸發(fā)的，以第一個鉤子為例

調用callHook函數(shù)并向其傳入this和'beforeCreate'字符串，那來看看callHook函數(shù)究竟是何方神圣

注意到，該函數(shù)一開始，也就是鉤子函數(shù)進入準備觸發(fā)前，進行了一個pushTarget()的操作，注釋寫的是“在鉤子函數(shù)觸發(fā)時，禁用依賴收集”，那這個操作是干嘛呢

言歸正傳，禁用了依賴收集后，創(chuàng)建handlers數(shù)組存入合并后options的hook，本例中就是找自定義或者繼承來的beforeCreate鉤子，然后在invokeWithErroeHandling函數(shù)中以此觸發(fā)，順序是先觸發(fā)父級，后自己定義的

而這個invokeWithErroeHandling函數(shù)如下

該函數(shù)直接就在內部call了鉤子，所以鉤子內部的this指向vm實例

以上就是鉤子函數(shù)的觸發(fā)過程，下面來看不同的生命周期之間究竟干了什么

beforeCreate之前

beforeCreate之后到created

1.對于props：合法化，緩存key進數(shù)組方便下次迭代，defineReactive

2.對于data：檢驗props，methods中是否有重名屬性，defineReactive

3.對于methods：代理到vm實例上，方便使用this.method.name調用

4.對于computed：封裝成watcher并用該watcher的value緩存該計算屬性的value，再在每個計算屬性上劫持一層getter和setter，在第一次調用getter的時候，取得最新的value，并將依賴緩存下來，之后再依賴不變的前提下，getter只返回watcher的value而不是又去取一遍值，再依賴發(fā)生變化的時候，通知watcher更新，watcher取的最新值作為value，從而實現(xiàn)依賴更新計算屬性才更新

5.對于watch：調用$watch封裝成一個user watcher，如果有immediate options傳入，就在封裝的時候就調用一遍callback，有deep options傳進來的話就將該屬性的所有嵌套屬性記為依賴

beforeCreate之前主要是做準備工作，將該實例的options合并整理出來，再把$那些初始話

created之前就是對options做操作，data，props設置數(shù)據(jù)劫持，methods代理在vm實例上，computed，watch封裝成不同類型的watcher

asyncComputed源碼解析

在github上面搜索得到大牛已經(jīng)實現(xiàn)了 asyncComputed , 別人捷足先登了。樓主決定先看一遍它的源碼，之后會對他的源碼進行拓展。

1.1.1定義插件 ：Vue.js的插件使用的 install() 。這個方法的第一個參數(shù)是Vue構造器，第二個參數(shù)是一個可選的對象：

1.1.2使用插件 ： Vue通過全局 Vue.use(obj||fn) 來安裝vue的插件

**1.1.3Vue.use結合install直接使用: **

使用 ： app.vue

**配置： ** 我們可以通過Vue.mixin 來混合配置

2.2-1 asyncComputed.js

2.2-2 asyncComputed.js 中的 Vue.mixin({})中的beforeCreate()

這里 beforeCreate() 鉤子函數(shù) 初始化數(shù)據(jù)null，并沒有得到數(shù)據(jù)。

optionData : 得到每一個對應實例中的data（函數(shù)或者對象）

this.$options.computed[prefix + key] 給實例的 computed 添加函數(shù) ;

this.$options.data 給Vue實例化組件添加data方法（一個函數(shù)，在 created() 的時候執(zhí)行）

2.2-3 asyncComputed.js 中的 Vue.mixin({})中的Created()

vue-quill-editor 巧妙解決視頻樣式問題

這里記錄用 vue-quill-editor 出現(xiàn)的幾個問題：

使用 quill-image-extend-module 擴展組件（上一篇介紹了）

可以針對返回字符串的class進行調整

quill的視頻在保存的時候會轉成 iframe，視頻展示出來的效果不太可控，而且ie瀏覽器的支持不友好，

所以需要改成 video 原生標簽；做這件事的方法有兩種，第一種是去替換源碼，找到源碼寫iframe的位置進行重寫，網(wǎng)上資料有人這么干了，但是我看了一下源碼，不太建議；

第二種：用 replace 去替換返回的要顯示的html內容

以上是預覽富文本的內容，content 是從后端返回的html內容，只要在前端將iframe標簽用 video標簽替換一下即可；

Vue源碼系列之生命鉤子beforeUpdate&updated

在前面四個生命鉤子執(zhí)行完之后，實例正式走上工作崗位，等待數(shù)據(jù)的變更來進行相應的視圖更新，而更新的過程中就會觸發(fā)update相關鉤子

其實beforeUpdate鉤子之前我們已經(jīng)見過面了，就在mount那一篇

new watcher那里，在watcher構造函數(shù)傳入callback updateComponent之外，在options那里傳入了一個before函數(shù)，當依賴數(shù)據(jù)更新時，就會通知這個watcher更新從而更新頁面，但watcher不會馬上更新，因為在同一個事件循環(huán)里如果出現(xiàn)“把a改成b又將b改成c的操作”，那如果是馬上更新就會update兩次，而如果放在事件隊列里等主線程通知完所有watcher update之后再更新就會把重復無意義的更新剔除掉

所以updateComponent函數(shù)不會馬上執(zhí)行，而是被添加到一個更新隊列，同樣的，在本輪事件循環(huán)中的所有更新watcher都會被添加到這個隊列

最后調用的nextTick函數(shù)會保證將flushScheduleQueue這個函數(shù)延時到任務隊列時執(zhí)行，而這個函數(shù)就是將隊列中所有watcher更新，也就是執(zhí)行run方法

可以看到，在每個watcher執(zhí)行run之前會查看有沒有before函數(shù)，也就是上面說到的那個函數(shù)，等更新到render watcher也就是mount那時創(chuàng)建的那個watcher，beforeUpdate鉤子觸發(fā)

等到所有watcher更新完后，就會調用callUpdatedHooks這個函數(shù)，在里面找到render watcher，觸發(fā)updated鉤子

但注意到官網(wǎng)有一句話

有朋友就會問了，不是所有的watcher都更新完了嗎？那怎么不敢保證，大膽點，改成能保證

慢著慢著，這樣做bug出現(xiàn)的更大膽，人家那樣說是有理由的

正常的父組件包含同步子組件

生命周期都是

父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

更新生命周期

父beforeUpdate-子beforeUpdate-子updated-父updated

但還有異步組件啊

此時，父組件遇到異步子組件，如果子組件沒有加載完，就會先跳過，繼續(xù)執(zhí)行自己的生命鉤子，等到加載完后，再強制父組件進行update，所以子組件被重繪一定再updated鉤子之前，但反之則不一定

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