鈎子函數(hook)

文章目錄

• 1. 概念
• 2. 執行個體

1. 概念

鈎子函數: 一些預定義的函數, 由定義者調用, 使用者提供實作.

解釋: 如Vue中定義了多個生命周期鈎子, vue在内部定義并調用這些鈎子函數(不管是否有具體實作), 開發者在template中給出各鈎子函數的實作,也可以不實作

2. 執行個體

vue的生命周期鈎子, vue生命周期鈎子參考: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

vue源碼:

var LIFECYCLE_HOOKS = [
    'beforeCreate',
    'created',
    'beforeMount',
    'mounted',
    'beforeUpdate',
    'updated',
    'beforeDestroy',
    'destroyed',
    'activated',
    'deactivated',
    'errorCaptured',
    'serverPrefetch'
];

.......

vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
           

可以看到vue在内部定義了一系列的生命周期鈎子, 并在特定時刻通過callHook來調用. 具體實作是由開發者提供的, 如created鈎子可以在模闆加載時用來從背景加載資料.