详解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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
AJAX检测用户名是否存在的方法
Mar 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php无限极分类实现方法分析
2019/07/04 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
树莓派实现移动拍照
2019/06/22 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
寄语学生的话
2014/04/10 职场文书
实习指导老师评语
2014/04/26 职场文书
大学开学计划书
2014/04/30 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
英语复习计划
2015/01/19 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS