详解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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
世界收音机发展史
2021/03/01 无线电
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python 实现简单的FTP程序
2019/12/27 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
python3.7调试的实例方法
2020/07/21 Python
html5与css3小应用
2013/04/03 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
最新创业融资计划书
2014/01/19 职场文书
网络程序员自荐信
2014/01/25 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
会计工作态度自我评价
2015/03/06 职场文书