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