详解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调用迅雷下载代码的二种方法
Apr 15 Javascript
js使用ajax读博客rss示例
May 06 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
详解操作虚拟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
php4的session功能评述(一)
2006/10/09 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php向js函数传参的几种方法
2014/08/10 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python进阶之递归函数的用法及其示例
2018/01/31 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
python中最小二乘法详细讲解
2021/02/19 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
审计主管岗位职责
2014/01/31 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript