資訊專欄INFORMATION COLUMN
摘要：其中的標(biāo)志位什么時候設(shè)置呢，是在相應(yīng)的鉤子觸發(fā)之后，具體看下面源碼怎么執(zhí)行鉤子呢沒錯，就是下面這個函數(shù)是自己傳入的等回調(diào)那是怎么用呢比如觸發(fā)就會這么調(diào)用很簡單不，直接拿到鉤子，然后遍歷執(zhí)行，綁定上下文對象。
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧
【Vue原理】生命周期 - 源碼版
好的！今天探索Vue的生命周期，鑒于生命周期這個東西很簡單，所以直接寫源碼版了
簡單到什么程度呢，就是直接執(zhí)行你的 created 什么的，只是分在什么時候執(zhí)行而已
但是！我們?nèi)匀灰謨蓚€問題，理清思路方便記憶
1、生命鉤子怎么觸發(fā) 2、生命鉤子在什么時候觸發(fā)鉤子怎么觸發(fā)
首先，我設(shè)置了下面的例子
那么 el 和 created 就是你傳入 Vue 的自定義選項啦
1、把所有同類鉤子先合并成數(shù)組，然后存放在 vm.$options
這個點跟 mixins 有關(guān)，可以看這篇下對鉤子的合并處理
【Vue原理】Mixins - 源碼版
合并，主要是為了把全局設(shè)置的鉤子和 組件自定義的鉤子合并起來，就算你沒有全局鉤子，也要存在數(shù)組里面，比如 created 是下面
vm.$options={
created:[fn,fn,fn...]
}
2、初始化設(shè)置一些標(biāo)志位，表明是否已經(jīng)完成某種鉤子
function initLifecycle(vm) {
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;
}
這個函數(shù)會在 beforeCreated 鉤子觸發(fā)前調(diào)用，在 Vue.prototype._init 中，下個問題源碼有顯示。其中的標(biāo)志位什么時候設(shè)置呢，是在相應(yīng)的鉤子觸發(fā)之后，具體看下面源碼
3怎么執(zhí)行鉤子呢
沒錯，就是下面這個函數(shù)
function callHook(vm, hook) {
// 是自己傳入的 created 等回調(diào)
var handlers = vm.$options[hook];
if (handlers) {
for (var i = 0,j = handlers.length; i < j; i++) {
handlers[i].call(vm);
}
}
}
那是怎么用呢？
比如觸發(fā) created 就會這么調(diào)用
callHook(vm,"created")
很簡單4不4，直接拿到鉤子，然后遍歷執(zhí)行，綁定上下文對象。
為什么是數(shù)組？上面已經(jīng)說過啦，一個實例通過mixins可能有很多個相同鉤子，所以合并成的數(shù)組
鉤子什么時候觸發(fā)要說講解鉤子在什么時候觸發(fā)把，好像也沒什么講的，Vue文檔都說清楚了，但是很顯然，所以我們直接以源碼的形式給出來
下面就說了幾個鉤子，有幾個感覺不太常用，就不列出來了
function Vue(opt){
this._init(opt)
}
Vue.prototype._init(opt){
... 合并選項
... 設(shè)置初始值 ，事件 等數(shù)據(jù)
initLifecycle(vm)
callHook(vm, "beforeCreate");
... 初始化選項等數(shù)據(jù)
callHook(vm, "created");
...獲取掛載的DOM 父節(jié)點
callHook(vm, "beforeMount");
...解析模板成渲染函數(shù)，并執(zhí)行渲染函數(shù)，生成DOM插入頁面
vm._isMounted = true;
callHook(vm, "mounted");
}
// 組件更新時會調(diào)用這個函數(shù)
Vue.prototype._update = function(
vnode, hydrating
) {
if (vm._isMounted) {
callHook(vm, "beforeUpdate");
}
...重新調(diào)用渲染函數(shù)，對比舊節(jié)點和新節(jié)點，得到最小差異，然后只更新這部分頁面
callHook(vm, "updated");
}
// 節(jié)點被移除時會調(diào)用這個函數(shù)
Vue.prototype.$destroy = function() {
callHook(vm, "beforeDestroy");
vm._isBeingDestroyed = true;
...實例被消除，移除所有 watcher
vm._isDestroyed = true;
...DOM被移除
callHook(vm, "destroyed");
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105389.html
摘要：而我覺得現(xiàn)在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當(dāng)于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。而這個不會合并，直接替換掉整個選項 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識點，對一些知識點進(jìn)行更加深入的描述。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識點，對一些知識點進(jìn)行更加深入的描述。 一、對于MVVM的理解？ MVVM 是 Model-View-Vie...
閱讀 2861·2021-09-24 10:34
閱讀 1945·2021-09-22 10:02
閱讀 2340·2021-09-09 09:33
閱讀 1520·2021-08-13 15:02
閱讀 3351·2020-12-03 17:10
閱讀 1251·2019-08-30 15:44
閱讀 2204·2019-08-30 12:58
閱讀 3295·2019-08-26 13:40
