详解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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
Vue双向绑定实现原理与方法详解
May 07 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
yii操作session实例简介
2014/07/31 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
广告显示判断
2006/08/31 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
python爬取音频下载的示例代码
2020/10/19 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
银行员工辞职信范文
2014/01/20 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
满月酒邀请函
2015/01/30 职场文书
无工作证明怎么写
2015/06/15 职场文书
《假如》教学反思
2016/02/17 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript