詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
更新時間：2018年07月25日 10:42:00 作者：花花呀
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue實例在不同的生命周期階段，都調(diào)用了callHook方法。比如在實例初始化（_init）的時候調(diào)用callHook(vm, 'beforeCreate')和callHook(vm, 'created')。
這里的"beforeCreate","created"狀態(tài)并非隨意定義，而是來自于Vue內(nèi)部的定義的生命周期鉤子。
var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed', 'activated', 'deactivated', 'errorCaptured' ];
再研究Vue官網(wǎng)的生命周期圖示，是不是更容易理解了。
接下來我們來看一下Vue中實現(xiàn)鉤子函數(shù)的源碼：
function callHook (vm, hook) {
// #7573 disable dep collection when invoking lifecycle hooks
pushTarget();
var handlers = vm.$options[hook];
if (handlers) {
for (var i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm);
} catch (e) {
handleError(e, vm, (hook + " hook"));
}
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook);
}
popTarget();
}
舉個例子說明：
let test = new Vue({
data: {
a: 1
},
created: function () {
console.log("這里是Created");
}
});
實例化一個Vue組件test,給test定義了數(shù)據(jù)data，以及created方法。而在實例化組件的時候，Vue內(nèi)部調(diào)用了callHook(vm,'created')（上文已說明）。執(zhí)行callHook函數(shù)的時候，Vue在test組件的$options中查找created是否存在，如果存在的話就執(zhí)行created相對應(yīng)的方法。這里就會執(zhí)行console.log("這里是Created")。
callHook的作用就是執(zhí)行用戶自定義的鉤子函數(shù)，并將鉤子中this指向指為當(dāng)前組件實例。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式
這篇文章主要介紹了vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue3?Reactive響應(yīng)式原理邏輯詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue如何實現(xiàn)文件上傳及預(yù)覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細的代碼示例，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了在vue里使用codemirror遇到問題，本文給大家記錄下來了,需要的朋友可以參考下2018-11-11
vue+element+oss實現(xiàn)前端分片上傳和斷點續(xù)傳
這篇文章主要介紹了vue+element+oss實現(xiàn)前端分片上傳和斷點續(xù)傳，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue使用自定義的icon圖標(biāo)的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
下面小編就為大家分享一篇elementui的默認樣式修改方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-02-02