詳解Vue源碼學習之callHook鉤子函數(shù)

更新時間：2018年07月25日 10:42:00 作者：花花呀

這篇文章主要介紹了詳解Vue源碼學習之callHook鉤子函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Vue實例在不同的生命周期階段，都調用了callHook方法。比如在實例初始化（_init）的時候調用callHook(vm, 'beforeCreate')和callHook(vm, 'created')。

這里的"beforeCreate","created"狀態(tài)并非隨意定義，而是來自于Vue內部的定義的生命周期鉤子。

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內部調用了callHook(vm,'created')（上文已說明）。執(zhí)行callHook函數(shù)的時候，Vue在test組件的$options中查找created是否存在，如果存在的話就執(zhí)行created相對應的方法。這里就會執(zhí)行console.log("這里是Created")。

callHook的作用就是執(zhí)行用戶自定義的鉤子函數(shù)，并將鉤子中this指向指為當前組件實例。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Pinia中action使用方法詳解
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
vue隱藏路由的實現(xiàn)方法
這篇文章主要介紹了vue隱藏路由的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
詳解vue中移動端自適應方案
這篇文章主要介紹了vue移動端自適應，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
基于vue2.0實現(xiàn)的級聯(lián)選擇器
這篇文章主要介紹了基于vue2.0實現(xiàn)的級聯(lián)選擇器，基于Vue的級聯(lián)選擇器，可以單項，二級，三級級聯(lián)，多級級聯(lián)，有興趣可以了解一下
2017-06-06
詳解vuejs2.0 select 動態(tài)綁定下拉框支持多選
這篇文章主要介紹了vuejs2.0 select動態(tài)綁定下拉框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue之proxyTable代理超全面配置流程
這篇文章主要介紹了vue之proxyTable代理超全面配置流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談VUE單頁應用首屏加載速度優(yōu)化方案
這篇文章主要介紹了淺談VUE單頁應用首屏加載速度優(yōu)化方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
解決antd datepicker 獲取時間默認少8個小時的問題
這篇文章主要介紹了解決antd datepicker 獲取時間默認少8個小時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue使用Multiavatarjs生成自定義隨機頭像的案例
這篇文章給大家介紹了Vue項目中使用Multiavatarjs生成自定義隨機頭像的案例,文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下
2023-10-10
vue打印瀏覽器頁面功能的兩種實現(xiàn)方法
這篇文章主要給大家介紹了關于vue打印瀏覽器頁面功能的兩種實現(xiàn)方法,這個功能其實也是自己學習到的,做完也有一段時間了,一直想記錄總結一下,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04