详解Vue源码学习之callHook钩子函数
2018-07-25 10:42
1801 查看
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指向指为当前组件实例。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 详解Vue学习笔记进阶篇之列表过渡及其他
- Netty学习:ChannelHandler执行顺序详解,附源码分析
- 机器学习实战_k近邻算法源码详解
- vue源码学习之Object.defineProperty对象属性监听
- Vue源码学习笔记
- 学习vue实现双向绑定【附源码下载地址】
- Scala中上下文界定内幕中的隐式参数与隐式参数的实战详解及其在Spark中的应用源码解析之Scala学习笔记-52
- Vue学习之源码分析--Vue.js事件机制(四)
- vue.js学习之vue-cli定制脚手架详解
- C++文件操作详解(ifstream、ofstream、fstream) - [源码/学习]
- Vue源码学习(二)$mount() 后的做的事(1)
- 详解关于Lua源码分析学习教程
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
- vue源码学习之Object.defineProperty 对数组监听
- Vue2.1.7源码学习
- Vue学习之源码分析--Vue.js响应式原理(一)
- 【转】Vue2.1.7 源码学习
- Python语言学习讲解十八: __new__、__init__、__call__之详解
- Vue.js 源码学习笔记 - 细节
- Linux源码学习笔记:syscalls