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