前言
在我們平時使用各種框架的時候,都避免不了使用到一種特性,就是 生命週期 鉤子,這些鉤子,可以給我們提供很多便利,讓我們在數據更新的每一個階段,都可以捕捉到它的變化。
我們最主要講的是 vue
的生命週期,先來一份大綱:
- beforeCreate(初始化界面前)
- created(初始化界面後)
- beforeMount(渲染dom前)
- mounted(渲染dom後)
- beforeUpdate(更新數據前)
- updated(更新數據後)
- beforeDestroy(卸載組件前)
- destroyed(卸載組件後)
今天,我就來分析一下,vue
在調用到每一個生命週期前,到底都在做了什麼?
正文
來看看官方的生命週期流程圖:
這張圖其實已經大概的告訴了我們,每個階段做了什麼,但是我覺得還有必要詳細的去分析一下,這樣在未來如果我們要實現類似於 vue
這種框架的時候,可以知道在什麼時間,應該去做什麼,怎麼去實現。
beforeCreate(初始化界面前)
function initInternalComponent (vm, options) {
var opts = vm.$options = Object.create(vm.constructor.options);
// doing this because it's faster than dynamic enumeration.
var parentVnode = options._parentVnode;
opts.parent = options.parent;
opts._parentVnode = parentVnode;
opts._parentElm = options._parentElm;
opts._refElm = options._refElm;
var vnodeComponentOptions = parentVnode.componentOptions;
opts.propsData = vnodeComponentOptions.propsData;
opts._parentListeners = vnodeComponentOptions.listeners;
opts._renderChildren = vnodeComponentOptions.children;
opts._componentTag = vnodeComponentOptions.tag;
if (options.render) {
opts.render = options.render;
opts.staticRenderFns = options.staticRenderFns;
}
}
function resolveConstructorOptions (Ctor) {
var options = Ctor.options;
if (Ctor.super) {
var superOptions = resolveConstructorOptions(Ctor.super);
var cachedSuperOptions = Ctor.superOptions;
if (superOptions !== cachedSuperOptions) {
// super 選項已更改,需要解決新選項。
Ctor.superOptions = superOptions;
// 檢查是否有任何後期修改/附加選項
var modifiedOptions = resolveModifiedOptions(Ctor);
// 更新基本擴展選項
if (modifiedOptions) {
extend(Ctor.extendOptions, modifiedOptions);
}
options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
if (options.name) {
options.components[options.name] = Ctor;
}//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
}
}
return options
}
if (options && options._isComponent) {
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
if (process.env.NODE_ENV !== 'production') {
initProxy(vm);
} else {
vm._renderProxy = vm;
}
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
在一開始,先做了一個屬性的合併處理,如果 options
存在並且 _isComponent
爲 true
,那麼就調用 initInternalComponent
方法,這個方法最主要是優化內部組件實例化,因爲動態選項合併非常緩慢,並且沒有內部組件選項需要特殊處理;
如果不滿足上述條件,就調用 mergeOptions
方法去做屬性合併,最後的返回值賦值給 $options
做一個渲染攔截,這裏的攔截,最主要是爲了在調用 render
方法的時候,通過 vm.$createElement
方法進行 dom
的創建;
function initLifecycle (vm) {
var options = vm.$options;
// 找到第一個非抽象父級
var parent = options.parent;
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent;
}
parent.$children.push(vm);
}
vm.$parent = parent;
vm.$root = parent ? parent.$root : vm;
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
vm.$children = [];
vm.$refs = {};
vm._watcher = null;
vm._inactive = null;
vm._directInactive = false;
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
初始化了一些參數;
function initEvents (vm) {
vm._events = Object.create(null);
vm._hasHookEvent = false;
// init父級附加事件
var listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}
function updateComponentListeners (
vm,
listeners,
oldListeners
) {
target = vm;
updateListeners(listeners, oldListeners || {}, add, remove$1, vm);
target = undefined;
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
初始化事件,如果 _parentListeners
存在的話,更新組件的事件監聽;
function initRender (vm) {
vm._vnode = null; // 子樹的根
vm._staticTrees = null; // v-once緩存的樹
var options = vm.$options;
var parentVnode = vm.$vnode = options._parentVnode; // 父樹中的佔位符節點
var renderContext = parentVnode && parentVnode.context;
vm.$slots = resolveSlots(options._renderChildren, renderContext);
vm.$scopedSlots = emptyObject;
// 將createElement fn綁定到此實例,以便我們在其中獲得適當的渲染上下文。
vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };
// 規範化始終應用於公共版本,在用戶編寫的渲染函數中使用。
vm.$createElement = function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
// 暴露了$ attrs和$ listeners以便更容易創建HOC。
// 他們需要被動反應,以便使用它們的HOC始終更新
var parentData = parentVnode && parentVnode.data;
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, function () {
!isUpdatingChildComponent && warn("$attrs is readonly.", vm);
}, true);
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, function () {
!isUpdatingChildComponent && warn("$listeners is readonly.", vm);
}, true);
} else {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true);
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true);
}
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
初始化渲染,defineReactive
的使用和作用,
到了這裏執行完畢後,就調用到了 beforeCreate
方法。
created(初始化界面後)
initInjections(vm); // 在數據/道具之前解決注入
initState(vm);
initProvide(vm); // 解決後提供的數據/道具
callHook(vm, 'created');
function resolveInject (inject, vm) {
if (inject) {
// 因爲流量不足以弄清楚緩存
var result = Object.create(null);
var keys = hasSymbol
? Reflect.ownKeys(inject).filter(function (key) {
return Object.getOwnPropertyDescriptor(inject, key).enumerable
})
: Object.keys(inject);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var provideKey = inject[key].from;
var source = vm;
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
result[key] = source._provided[provideKey];
break
}
source = source.$parent;
}
if (!source) {
if ('default' in inject[key]) {
var provideDefault = inject[key].default;
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault;
} else if (process.env.NODE_ENV !== 'production') {
warn(("Injection \"" + key + "\" not found"), vm);
}
}
}
return result
}
}
var shouldObserve = true;
function toggleObserving (value) {
shouldObserve = value;
}
function initInjections (vm) {
var result = resolveInject(vm.$options.inject, vm);
if (result) {
toggleObserving(false);
Object.keys(result).forEach(function (key) {
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, key, result[key], function () {
warn(
"Avoid mutating an injected value directly since the changes will be " +
"overwritten whenever the provided component re-renders. " +
"injection being mutated: \"" + key + "\"",
vm
);
});
} else {
defineReactive(vm, key, result[key]);
}
});
toggleObserving(true);
}
}
在這裏,其實最主要就是用來做不需要響應式的數據,官方文檔:provide / inject ;
function initState (vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.props) { initProps(vm, opts.props); }
if (opts.methods) { initMethods(vm, opts.methods); }
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
if (opts.computed) { initComputed(vm, opts.computed); }
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}
在處理完 inject
後,緊接着就做了 props
、methods
、data
、computed
和 watch
的初始化處理;
function initProvide (vm) {
var provide = vm.$options.provide;
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide;
}
}
Provide
和 Inject
作用其實是一樣的,只是處理的方式不一樣,具體區別請看官方文檔:provide / inject ;
到這裏執行完畢後,就要走到 created
鉤子了。
beforeMount(渲染dom前)
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
在渲染 dom
,先檢查了是否存在渲染位置,如果不存在的話,也就不會註冊了;
Vue.prototype.$mount = function (
el,
hydrating
) {
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating)
};
function mountComponent (
vm,
el,
hydrating
) {
vm.$el = el;
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode;
}
callHook(vm, 'beforeMount');
}
在 beforeMount
這裏,基本沒做什麼事情,只是做了一個 render
方法如果存在就綁定一下 createEmptyVNode
函數;
綁定完畢後,就執行了 beforeMount
鉤子;
mounted(渲染dom後)
var updateComponent;
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = function () {
var name = vm._name;
var id = vm._uid;
var startTag = "vue-perf-start:" + id;
var endTag = "vue-perf-end:" + id;
mark(startTag);
var vnode = vm._render();
mark(endTag);
measure(("vue " + name + " render"), startTag, endTag);
mark(startTag);
vm._update(vnode, hydrating);
mark(endTag);
measure(("vue " + name + " patch"), startTag, endTag);
};
} else {
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
}
// 我們在觀察者的構造函數中將其設置爲vm._watcher,因爲觀察者的初始補丁可能會調用$ forceUpdate(例如,在子組件的掛載掛鉤內),這依賴於已定義的vm._watcher
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);
hydrating = false;
// 手動掛載的實例,在自己掛載的調用掛載在其插入的掛鉤中爲渲染創建的子組件調用
if (vm.$vnode == null) {
vm._isMounted = true;
callHook(vm, 'mounted');
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
在 new Watcher
的時候,調用了 _render
方法,實現了 dom
的渲染,具體 _render
都做了什麼,點擊查看 vue 源碼解析(實例化前) - 初始化全局 API(最終章);
在執行完實例化 Watcher
以後,如果 $node
不存在,就說明是初始化渲染,執行 mounted
鉤子;
beforeUpdate(更新數據前)
Vue.prototype._update = function (vnode, hydrating) {
var vm = this;
if (vm._isMounted) {
callHook(vm, 'beforeUpdate');
}
};
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
如果當前的 vue
實例的 _isMounted
爲 true
的話,直接調用 beforeUpdate
鉤子;
_isMounted 在
mounted
鉤子執行前就已經設置爲 true 了。
執行 beforeUpdate
鉤子;
updated(更新數據後)
function callUpdatedHooks (queue) {
var i = queue.length;
while (i--) {
var watcher = queue[i];
var vm = watcher.vm;
if (vm._watcher === watcher && vm._isMounted) {
callHook(vm, 'updated');
}
}
}
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
因爲有多個組件的時候,會有很多個 watcher
,在這裏,就是檢查當前的得 watcher
是哪個,是當前的話,就直接執行當前 updated
鉤子。
beforeDestroy(卸載組件前)
Vue.prototype.$destroy = function () {
var vm = this;
if (vm._isBeingDestroyed) {
return
}
callHook(vm, 'beforeDestroy');
};
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
在卸載前,檢查是否已經被卸載,如果已經被卸載,就直接 return
出去;
執行 beforeDestroy
鉤子;
destroyed(卸載組件後)
vm._isBeingDestroyed = true;
// 從父級那裏刪除自己
var parent = vm.$parent;
if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
remove(parent.$children, vm);
}
// 拆解觀察者
if (vm._watcher) {
vm._watcher.teardown();
}
var i = vm._watchers.length;
while (i--) {
vm._watchers[i].teardown();
}
// 從凍結對象的數據中刪除引用可能沒有觀察者。
if (vm._data.__ob__) {
vm._data.__ob__.vmCount--;
}
// 準備執行最後一個鉤子
vm._isDestroyed = true;
// 在當前渲染的樹上調用destroyed hook
vm.__patch__(vm._vnode, null);
callHook(vm, 'destroyed');
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
其實這裏就是把所有有關自己痕跡的地方,都給刪除掉;
執行 destroyed
鉤子。
總結
到這裏,其實每一個生命週期的鉤子做了什麼,我們已經瞭解的差不多了,那這樣大量的代碼看起來可能不是很方便,所以我們做一個總結的 list
:
-
beforeCreate
:初始化了部分參數,如果有相同的參數,做了參數合併,執行beforeCreate
; -
created
:初始化了Inject
、Provide
、props
、methods
、data
、computed
和watch
,執行created
; -
beforeMount
:檢查是否存在el
屬性,存在的話進行渲染dom
操作,執行beforeMount
; -
mounted
:實例化Watcher
,渲染dom
,執行mounted
; -
beforeUpdate
:在渲染dom
後,執行了mounted
鉤子後,在數據更新的時候,執行beforeUpdate
; -
updated
:檢查當前的watcher
列表中,是否存在當前要更新數據的watcher
,如果存在就執行updated
; -
beforeDestroy
:檢查是否已經被卸載,如果已經被卸載,就直接return
出去,否則執行beforeDestroy
; -
destroyed
:把所有有關自己痕跡的地方,都給刪除掉;
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
獲取資料👈👈👈
本次給大家推薦一個免費的學習羣,裏面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q羣:👉👉👉582735936 👈👈👈,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視頻資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峯。