vue 源码详解(二): 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化、事件系统初始化
上一篇文章 生成 Vue
实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue()
的时候, 其内部做了哪些工作。
1. 从 Vue
构造函数开始
new Vue(options)
时, Vue
构造函数中只有一句代码 this._init(options)
。 通过执行这个函数顺次调用了下边代码中注释处 1 ~ 10
的代码, 下面就按照代码的执行顺序,依次解释下每个函数的作用。
let uid = 0
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++ // 1
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm) // 2
initEvents(vm) // 3
initRender(vm) // 4
callHook(vm, 'beforeCreate') // 5
initInjections(vm) // 6 resolve injections before data/props
initState(vm) // 7
initProvide(vm) // 8 resolve provide after data/props
callHook(vm, 'created') // 9
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el) // 10
}
}
}
1.1.1 初始化声明周期
注释很明了,
locate first non-abstract parent
, 即找到当前组件的第一个非抽象的父组件, 作为当前组件的父组件,并将当前组件记录到父组件的$children
列表中。组件建立父子组件关系时,抽象组件(如keep-alive
)是被忽略的。对当前组件的一些属性进行初始化,
$parent
标记当前组件的父组件。$root
标记当前组件的根组件, 若存在父组件, 则当前组件的根组件为父组件的根组件;若不存在父组件, 则当前组件的根组件是当前组件自身。然后初始化当前组件的子组件列表、引用列表($children / $refs)
分别为空。然后初始化了观察者列表_watcher
为null
. 最后初始化了_isMounted _isDestroyed _isBeingDestroyed
分别为false
, 依次表示为挂载到 DOM 、 组件未销毁、 组件当前非正在销毁状态
vue/src/core/instance/lifecycle.js
: initLifecycle
export function initLifecycle (vm: Component) {
const options = vm.$options
// 1 locate first non-abstract parent
let parent = options.parent
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
parent.$children.push(vm)
}
// 2. 对当前组件的一些属性进行初始化
vm.$parent = parent
vm.$root = parent ? parent.$root : vm
vm.$children = []
vm.$refs = {}
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false
}
1.1.2 初始化事件
vm._events
初始化了当前组件vm
的事件存储对象, 默认是一个没有任何属性的空对象;- 收集父组件上监听的事件对象,也就是监听器, 如果父组件上有监听器, 则和当前组件的监听器进行一系列对比,并更新。 具体逻辑详见下面
updateListeners的注释
.
vue/src/core/instance/events.js
:
这段代码中的 add remove
函数即我们上次提到的 eventMixin
中给 Vue
对象初始化的事件系统。
export function initEvents (vm: Component) {
vm._events = Object.create(null) // 1 事件存储对象
vm._hasHookEvent = false
// init parent attached events
const listeners = vm.$options._parentListeners
if (listeners) { // 2 如果父组件上有监听器, 则和当前组件的监听器进行一系列对比,并更新
updateComponentListeners(vm, listeners)
}
}
let target: any
function add (event, fn) {
target.$on(event, fn)
}
function remove (event, fn) {
target.$off(event, fn)
}
function createOnceHandler (event, fn) {
const _target = target
return function onceHandler () {
const res = fn.apply(null, arguments)
if (res !== null) {
_target.$off(event, onceHandler)
}
}
}
export function updateComponentListeners (
vm: Component,
listeners: Object,
oldListeners: ?Object
) {
target = vm
updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
target = undefined
}
vue/src/core/vdom/helpers/update-listeners.js
// 这个函数用来解析一个事件信息, 返回事件的名称、和是否被 once / capture / passive 修饰符修饰过
const normalizeEvent = cached((name: string): {
name: string,
once: boolean,
capture: boolean,
passive: boolean,
handler?: Function,
params?: Array<any>
} => {
const passive = name.charAt(0) === '&'
name = passive ? name.slice(1) : name
const once = name.charAt(0) === '~' // Prefixed last, checked first
name = once ? name.slice(1) : name
const capture = name.charAt(0) === '!'
name = capture ? name.slice(1) : name
return {
name,
once,
capture,
passive
}
})
export function createFnInvoker (fns: Function | Array<Function>, vm: ?Component): Function {
function invoker () {
const fns = invoker.fns
if (Array.isArray(fns)) {
const cloned = fns.slice()
for (let i = 0; i < cloned.length; i++) {
invokeWithErrorHandling(cloned[i], null, arguments, vm, `v-on handler`)
}
} else {
// return handler return value for single handlers
return invokeWithErrorHandling(fns, null, arguments, vm, `v-on handler`)
}
}
invoker.fns = fns
return invoker
}
export function updateListeners (
on: Object, // 父组件的事件监听对象
oldOn: Object, // 如果不是初次渲染, 原先的 vm 实例上可能存在一些原有的事件
add: Function,
remove: Function,
createOnceHandler: Function,
vm: Component
) {
let name, def, cur, old, event
for (name in on) { // 遍历父组件的事件对象
def = cur = on[name] // 父组件中的事件
old = oldOn[name] // 当前组件中已存在的同名事件
event = normalizeEvent(name) // 解析当前事件, 获取详细信息, 见 `normalizeEvent` 函数的注释
/* istanbul ignore if */
if (__WEEX__ && isPlainObject(def)) {
cur = def.handler
event.params = def.params
}
if (isUndef(cur)) { // 父组件事件不存在, 直接报警告
process.env.NODE_ENV !== 'production' && warn(
`Invalid handler for event "${event.name}": got ` + String(cur),
vm
)
} else if (isUndef(old)) { // 父组件事件存在, 并且当前组件不存在该事件的同名事件
if (isUndef(cur.fns)) { // 如果当前事件的事件处理函数不存在, 报错
cur = on[name] = createFnInvoker(cur, vm)
}
if (isTrue(event.once)) { // 如果是 once 修饰符修饰过的事件
cur = on[name] = createOnceHandler(event.name, cur, event.capture) // 为当前组件绑定 once 类型事件
}
add(event.name, cur, event.capture, event.passive, event.params) // 将事件存入当前组件事件对象
} else if (cur !== old) {
// 父组件存在该事件,子组件存在同名事件, 并且父子组件对于同一个事件的处理函数不相同
// 则采用从父组件传递过来的处理函数
old.fns = cur
on[name] = old
}
}
// 删除 vm 上之前存在、现在不存在的事件
for (name in oldOn) {
if (isUndef(on[name])) {
event = normalizeEvent(name)
remove(event.name, oldOn[name], event.capture)
}
}
}
vue\src\shared\util.js
isUndef isDef
这两个函数,就不解释了,知道是干啥的就可以了。
export function isUndef (v: any): boolean %checks {
return v === undefined || v === null
}
export function isDef (v: any): boolean %checks {
return v !== undefined && v !== null
}
1.1.3 渲染初始化与数据监听
终于来到大名鼎鼎的响应式数据处理了。
export function initRender (vm: Component) {
vm._vnode = null // the root of the child tree
vm._staticTrees = null // v-once cached trees
const options = vm.$options
const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
const renderContext = parentVnode && parentVnode.context
vm.$slots = resolveSlots(options._renderChildren, renderContext)
vm.$scopedSlots = emptyObject
// bind the createElement fn to this instance
// so that we get proper render context inside it.
// args order: tag, data, children, normalizationType, alwaysNormalize
// internal version is used by render functions compiled from templates
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
// $attrs & $listeners are exposed for easier HOC creation.
// they need to be reactive so that HOCs using them are always updated
const parentData = parentVnode && parentVnode.data
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
!isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)
} else {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
}
}
vue 源码详解(二): 组件生命周期初始化、事件系统初始化的更多相关文章
- Vue源码学习(二)——生命周期
官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...
- vue 源码详解(一):原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
- 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- OkHttp3源码详解(二) 整体流程
1.简单使用 同步: @Override public Response execute() throws IOException { synchronized (this) { if (execut ...
- spring事务详解(三)源码详解
系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...
- Shiro 登录认证源码详解
Shiro 登录认证源码详解 Apache Shiro 是一个强大且灵活的 Java 开源安全框架,拥有登录认证.授权管理.企业级会话管理和加密等功能,相比 Spring Security 来说要更加 ...
- Activiti架构分析及源码详解
目录 Activiti架构分析及源码详解 引言 一.Activiti设计解析-架构&领域模型 1.1 架构 1.2 领域模型 二.Activiti设计解析-PVM执行树 2.1 核心理念 2. ...
- udhcp源码详解(五) 之DHCP包--options字段
中间有很长一段时间没有更新udhcp源码详解的博客,主要是源码里的函数太多,不知道要不要一个一个讲下去,要知道讲DHCP的实现理论的话一篇博文也就可以大致的讲完,但实现的源码却要关心很多的问题,比如说 ...
- 源码详解系列(六) ------ 全面讲解druid的使用和源码
简介 druid是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,druid还扩展 ...
随机推荐
- 图解协程调度模型-GMP模型
现在无论是客户端.服务端或web开发都会涉及到多线程的概念.那么大家也知道,线程是操作系统能够进行运算调度的最小单位,同一个进程中的多个线程都共享这个进程的全部系统资源. 线程 三个基本概念 内核线程 ...
- 通过winsw将jar包做成window后台服务运行
第一步:下载Winsw地址 https://github.com/kohsuke/winsw/releases 第二步: 将下载好的sample-minimal.xml和WinSW.NET4.exe ...
- hdu 6034 贪心模拟 好坑
关键在排序!!! 数组间的排序会超时,所以需要把一个数组映射成一个数字,就可以了 #include <bits/stdc++.h> using namespace std; typedef ...
- Redis 底层数据结构之链表
文章参考:<Redis设计与实现>黄建宏 链表 链表提供了高效的节点重排能力,以及可以顺序访问,也可以通过增删节点灵活调整链表长度,Redis中的列表.发布订阅.慢查询.监视器等功能均用到 ...
- 1.6Java语言规范、API、JDK、和IDE
要点提示:Java语言规范定义了Java的语法,Java库则在JavaAPI中定义.JDK是用于开发和运行Java程序的软件.IDE是快速开发程序的集成开发环境. 计算机语言有严格的使用规范.
- Linux | Shell脚本的编写
Shell 脚本的介绍 Shell脚本通过Shell终端解释器当作人与计算机硬件之间的翻译官,用户可以通过它执行各种命令,不仅有简单的,还有复杂的,比如:判断.循环.分支等这些高级编程中才有的特性.S ...
- YAOI Round #3 题解
前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/7 Div.2 : http://47.110.12.131:9016/contest/8 Div ...
- 『与善仁』Appium基础 — 3、ADB命令介绍
目录 1.ADB命令简介 2.ADB命令运行原理 3.通过ADB命令连接安卓模拟器 (1)安装安卓模拟器 (2)ADB命令连接安卓模拟器 (3)常用Android模拟器端口号 1.ADB命令简介 AD ...
- 个人博客开发之blog-api 项目整合JWT实现token登录认证
前言 现在前后端分离,基于session设计到跨越问题,而且session在多台服器之前同步问题,肯能会丢失,所以倾向于使用jwt作为token认证 json web token 导入java-jwt ...
- 高校表白App-团队冲刺第三天
今天要做什么 今天开站立会议的时候,忽然发觉在一个完整的App上好像是有一些引导页的,比如说在第一次使用App的时候,或者是在使用App的时候会出现新手指引操作. 做了什么 通过查阅资料来学习View ...