详解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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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
php巧获服务器端信息
2006/12/06 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
php 浮点数比较方法详解
2017/05/05 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python any()函数的使用方法
2019/10/28 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python获取linux系统信息的三种方法
2020/10/14 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
主持人大赛开场白
2015/05/29 职场文书
CAD实训总结范文
2015/08/03 职场文书
导游词之张家口
2019/12/13 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js