详解Vue源码学习之callHook钩子函数


Posted in Javascript onJuly 25, 2018

Vue实例在不同的生命周期阶段,都调用了callHook方法。比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created')。

详解Vue源码学习之callHook钩子函数

这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子。

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

再研究Vue官网的生命周期图示,是不是更容易理解了。

详解Vue源码学习之callHook钩子函数

接下来我们来看一下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指向指为当前组件实例。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
js制作提示框插件
Dec 24 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python星号*与**用法分析
2018/02/02 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
大门门卫岗位职责
2013/11/30 职场文书
老公给老婆的保证书
2014/04/28 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
毕业生找工作求职信
2014/08/05 职场文书
会计工作态度自我评价
2015/03/06 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015年暑假工作总结
2015/07/13 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书