博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue源码学习之callHook钩子函数
阅读量:5996 次
发布时间:2019-06-20

本文共 1303 字,大约阅读时间需要 4 分钟。

Vue实例在不同的生命周期阶段,都调用了callHook方法。比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created')。

clipboard.png

这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子。

var LIFECYCLE_HOOKS = [  'beforeCreate',  'created',  'beforeMount',  'mounted',  'beforeUpdate',  'updated',  'beforeDestroy',  'destroyed',  'activated',  'deactivated',  'errorCaptured'];

再研究Vue官网的生命周期图示,是不是更容易理解了。

clipboard.png

接下来我们来看一下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指向指为当前组件实例。

转载地址:http://vwhlx.baihongyu.com/

你可能感兴趣的文章
node.js模拟抄表 tcp服务端和客户端
查看>>
基于SharePoint的单点登录的实现
查看>>
SQL Server之事务基础知识
查看>>
linux-ubuntu txt乱码
查看>>
C# 语言规范_版本5.0 (第4章 类型)
查看>>
入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试...
查看>>
[1252]进制转换 sdutOJ
查看>>
composer 安装 ubuntu 12.04
查看>>
Vue开发与调试工具
查看>>
DES加密解密
查看>>
2017年1月15日,开始认真读书!!!
查看>>
oracle TNS-12549: TNS:operating system resource quota exceeded
查看>>
css背景图片位置:background的position(转)
查看>>
【总结整理】webstorm插件使用
查看>>
微服务(二)hystrix
查看>>
git for windows
查看>>
浅谈oracle中for update 和 for update nowait 和 for update wait x的区别
查看>>
DOS与内存
查看>>
[Micropython]发光二极管制作炫彩跑马灯
查看>>
jQuery获取Select选择的Text和 Value(转)
查看>>