vue源码解析pdf_Vue源码全面解析八 callHook函数(触发生命周期函数)
首先我们打开‘src/core/instance/lifecycle.js'文件,代码如下:
export function callHook (vm: Component, hook: string) { pushTarget() const handlers = vm.$options[hook] const info = `${hook} hook` if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { invokeWithErrorHandling(handlers[i], vm, null, vm, info) } } if (vm._hasHookEvent) { vm.$emit('hook:' + hook) } popTarget()}
可以看到这个函数比较简单,主要有3点:
1、禁止Dep的依赖收集
2、调用 "invokeWithErrorHandling" 触发对应的生命周期函数
3、触发对应是钩子函数,如果存在的话
pushTarget()// 函数代码如下export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target}
可以看调用该函数的时候没有传任何参数,那就是 “target” 参数的 “undefined”,就没有收集对象了。
const handlers = vm.$options[hook]const info = `${hook} hook`
定义了 “handlers” 和 “info” 两个变量,分别存储生命周期函数和事件描述。
if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { invokeWithErrorHandling(handlers[i], vm, null, vm, info) } }
可以看到 “handlers” 如果存在的话,那肯定是一个数组的形式,这里会遍历数组来进行调用。
vue官网说的是每个生命周期钩子都是函数类型,但是我们从这里看出来其实也可以是函数数组,例如:
beforeCreate:[
() => {conosle.log("beforeCreate1")},
() => {conosle.log("beforeCreate2")},
]
你会看到数组里面的两个函数都被执行了。
if (vm._hasHookEvent) { vm.$emit('hook:' + hook) }
如果存在"hook" 钩子函数,则调用相关的事件
钩子函数的名称必须已 "hook:"开头,后面接对应的生命周期名称,例如:
this.$on("hook:mounted", () => {})
钩子函数必须注册在对应的生命周期函数内,或者之后的生命周期内定义才有效。
popTarget()// 代码如下export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1]}
最后是恢复Dep的依赖收集。把之前的 “target” 等于undefined移除掉。
vue源码解析pdf_Vue源码全面解析八 callHook函数(触发生命周期函数)相关推荐
- 细说vue钩子函数(生命周期函数)
一.概述 钩子函数用来描述一个组件从引入到退出的全过程中的某个过程,整个过程称为生命周期. 钩子函数按照组件生命周期的过程分为:挂载阶段=>更新阶段=>销毁阶段. 二.每个阶段对应的钩子函 ...
- Activity启动流程源码分析-浅析生命周期函数
源码分析 接着上一篇 Activity启动流程源码分析-setContentView源码阅读 的讲解,本节介绍一下Activity的生命周期函数何时被调用 要看Activity的生命周期函数何时被调用 ...
- vue的生命周期函数
一.生命周期 又名:生命周期回调函数.生命周期函数.生命周期钩子. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的. 生命 ...
- 什么是php的ast结构,什么是AST?Vue源码中AST语法树的解析
这篇文章给大家介绍的内容是关于什么是AST?Vue源码中AST语法树的解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是AST AST是指抽象语法树(abstract syn ...
- Vue源码阅读(12):解析器
今天聊聊解析器,解析器的作用是将程序员编写的模板字符串解析成抽象语法树,抽象语法树可以理解成模板字符串的对象表示形式,其本质并没有什么神奇的,只不过是 JS 中最为常见的对象字面量. 通过抽象语法树, ...
- Spark之SQL解析(源码阅读十)
如何能更好的运用与监控sparkSQL?或许我们改更深层次的了解它深层次的原理是什么.之前总结的已经写了传统数据库与Spark的sql解析之间的差别.那么我们下来直切主题~ 如今的Spark已经支持多 ...
- wireshark协议解析器 源码分析 封装调用
源码分析 Wireshark启动时,所有解析器进行初始化和注册.要注册的信息包括协议名称.各个字段的信息.过滤用的关键字.要关联的下层协议与端口(handoff)等.在解析过程,每个解析器负责解析自己 ...
- japidocs怎么设置参数必填_JApiDocs 动态生成接口文档,并解析java 源码中的注释...
1.介绍 JApiDocs 是一个符合 Java 编程习惯的 Api 文档生成工具.最大程度地利用 Java 的语法特性,你只管用心设计好接口,添加必要的注释,JApiDocs 会帮你导出一份漂亮的 ...
- dubbo源码深度解析_Spring源码深度解析:手把手教你搭建Spring开发环境
Spring环境搭建流程,如果是第一次接触spring源码的环境搭建,确实还是比较麻烦的. 作者使用的编译器为目前流行的lntelliJ IDEA,版本为2018旗舰版.Eclipse用户还需要自己揣 ...
最新文章
- 别让用户发呆——设计中的防呆策略
- Apache服务器错误问题Internal Server Error
- CG CTF WEB 层层递进
- 穿越栅栏 Overfencing
- 程序员难以攻克的十大难题
- winshark重要数据结构
- ALM 中查看某个 test 的更改 history 历史
- 用for打印菱形java_Java 动态打印菱形代码之for循环的使用
- AWK学习笔记八:AWK内置函数
- 自己的域名邮箱用GMAIL:申请注册GMAIL的免费企业邮箱
- 怎么在win10服务器上搭建网站,win10怎么搭建web服务器 win10搭建web服务器的方法...
- 脚本文件BAT入门(1)
- hdu2122 poj2485 最小生成树
- mac安静执行脚本_自动切换mac输入法-安静模式
- 联盟:微信封号最新规则以及解决方法
- Unity3D内置Shader私房课(三)Decal贴花
- python 使用 turtle库 画“皮卡丘”
- 微信图片太模糊如何弄清晰?微信图片过期怎么恢复原图
- javascript实现下拉列表框模糊查询
- 百度安卓开发一二面面经
热门文章
- The conversion of a varchar data type to a datetime data type resulted in an out-of-range value
- S6 edge+的多米诺骨牌效应:大屏的趋势
- Android Fragmnet的使用新体会
- 导入python库linux_Linux下Python安装PyMySQL成功,但无法导入的问题
- SQLServer 存储过程
- php 检测是否是微信浏览器,php判断是否是微信浏览器和是否是移动端代码
- android webview 更新,Android WebView缓存没更新解决方案
- python pytest_Python项目的pytest初始化
- 简述PHP中有哪些运算符,PHP运算符简述
- springboot+mybatis+sqlserver导出数据库数据并实现下载到excel