Vue實例在不同的生命周期階段，都調用了callHook方法。比如在實例初始化（_init）的時候調用callHook(vm, 'beforeCreate')和callHook(vm, 'created')。
這里的"beforeCreate","created"狀態并非隨意定義，而是來自于Vue內部的定義的生命周期鉤子。
var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed', 'activated', 'deactivated', 'errorCaptured'];
再研究Vue官網的生命周期圖示，是不是更容易理解了。
接下來我們來看一下Vue中實現鉤子函數的源碼：
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定義了數據data，以及created方法。而在實例化組件的時候，Vue內部調用了callHook(vm,'created')（上文已說明）。執行callHook函數的時候，Vue在test組件的$options中查找created是否存在，如果存在的話就執行created相對應的方法。這里就會執行console.log("這里是Created")。
callHook的作用就是執行用戶自定義的鉤子函數，并將鉤子中this指向指為當前組件實例。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
