详解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代码
Sep 04 Javascript
学习ExtJS Window常用方法
Oct 07 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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 xml文件操作代码(一)
2009/03/20 PHP
Chrome Web App开发小结
2014/09/04 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
document.compatMode介绍
2009/05/21 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
实例Python处理XML文件的方法
2015/08/31 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
报效祖国演讲稿
2014/09/15 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
聘任书格式及范文
2015/09/21 职场文书
导游词之青岛崂山
2019/12/27 职场文书