博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue[源码]生命周期钩子的实现
阅读量:6904 次
发布时间:2019-06-27

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

先看下这5个函数调用:

callHook(vm, 'beforeCreate')initInjections(vm) // resolve injections before data/propsinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, 'created')复制代码

先看看callHook函数作用:调用生命周期钩子函数

下面是
callHook函数源码

export function callHook (vm: Component, hook: string) {  // #7573 disable dep collection when invoking lifecycle hooks  pushTarget() //为了避免在某些生命周期钩子中使用 props 数据导致收集冗余的依赖  const handlers = vm.$options[hook] //获取生命周期钩子 vue选项合并会把生命周期钩子选项合并成一个数组  if (handlers) {    for (let i = 0, j = handlers.length; i < j; i++) {      try {        handlers[i].call(vm)//为了保证生命周期钩子函数内可以通过 this 访问实例对象,所以使用 .call(vm) 执行这些函数      } catch (e) { //为了捕捉可能出现的错误        handleError(e, vm, `${hook} hook`)      }    }  }  if (vm._hasHookEvent) {    vm.$emit('hook:' + hook)  }  popTarget() //为了避免在某些生命周期钩子中使用 props 数据导致收集冗余的依赖}复制代码

接收两个参数:实例对象和要调用的生命周期钩子的名称

现在大家应该知道,beforeCreate 以及 created 这两个生命周期钩子的调用时机了。

其中 initState 包括了:initPropsinitMethodsinitDatainitComputed 以及 initWatch

所以当 beforeCreate 钩子被调用时,所有与 propsmethodsdatacomputed 以及 watch 相关的内容都不能使用,当然了 inject/provide 也是不可用的。

created 生命周期钩子

initInjectionsinitState 以及 initProvide 执行完毕之后才被调用,

所以在 created 钩子中,是完全能够使用以上提到的内容的。但由于此时还没有任何挂载的操作,但是在 created 中是不能访问DOM的,即不能访问 $el

callHook 函数最后一段代码

if (vm._hasHookEvent) {  vm.$emit('hook:' + hook)}复制代码

vm._hasHookEvent 是在 initEvents 函数中定义的,它的作用是判断是否存在生命周期钩子的事件侦听器,初始化值为 false 代表没有,当组件检测到存在生命周期钩子的事件侦听器时,会将 vm._hasHookEvent 设置为 true

介绍下生命周期钩子事件帧听器:

复制代码

使用hook:加上生命周期钩子名称来监听组件内对应的生命周期事件

接下来继续讲那几个调用函数:initState

initState执行前先执行了initInjections函数,也就是说inject选项更早被初始化,由于初始化inject设计到比较多 先跳过讲initstate

export function initState (vm: Component) {  vm._watchers = [] //在vue实例对象上添加一个属性(数组)  const opts = vm.$options //定义一个常量作为vm.$options引用  if (opts.props) initProps(vm, opts.props) //判断选项中是否有props 有则调用initprops//判断是否有methods,有则调用initmethodds初始化methods选项  if (opts.methods) initMethods(vm, opts.methods)   if (opts.data) {//判断data是否存在 //调用initdata初始化data选项    initData(vm)  } else {//如果不存在则调用observe函数观察一个空对象    observe(vm._data = {}, true /* asRootData */)  }  if (opts.computed) initComputed(vm, opts.computed) //判断computed是否存在,然后初始化  if (opts.watch && opts.watch !== nativeWatch) { //判断是否存在和是否是原生对象...    initWatch(vm, opts.watch)  }}复制代码

整理完initstate函数发现都是一些初始化选项汇总:

转载于:https://juejin.im/post/5ca1df27e51d45301b5c96e6

你可能感兴趣的文章
xen虚拟化实战系列(四)之xen虚拟机扩展磁盘空间一法
查看>>
【算法】二叉查找树(BST)实现字典API
查看>>
通用服务器桩-Receiver使用说明文档
查看>>
使用asp.net 2.0的CreateUserwizard控件如何向自己的数据表中添加数据
查看>>
一次WinRoute后门攻防实况
查看>>
Intel主板支持硬盘热拔插显示图标的原因
查看>>
RHEL6基础三十六之服务器维护基础命令⑥sed
查看>>
浅谈AD RID池系列(三):Server 2008 R2补丁for RID
查看>>
针对桌面云终端做专用的高性价比CPU,吉湾微电子获首轮融资
查看>>
poj2481 树状数组
查看>>
Contrinex为高温应用推出新的RFID标签
查看>>
Q3中国光网络系统支出放缓
查看>>
MapXtreme 2005 学习心得 第八节Session问题澄清-两种配置方式致开发方式不同(九)...
查看>>
Windows 10即将针对共享功能进行大量修复和改进
查看>>
数据驱动业务决策的5个步骤
查看>>
上网个人信息如何不“裸奔” 10条信息安全建议
查看>>
JIRA的常用选项
查看>>
专访Facebook HipHop作者、阿里研究员赵海平:生物与计算机交织的独特人生
查看>>
监控视频须严加规范
查看>>
实例化需求的优点
查看>>