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 初始化声明周期

  1. 注释很明了, locate first non-abstract parent, 即找到当前组件的第一个非抽象的父组件, 作为当前组件的父组件,并将当前组件记录到父组件的 $children 列表中。组件建立父子组件关系时,抽象组件(如 keep-alive)是被忽略的。

  2. 对当前组件的一些属性进行初始化, $parent 标记当前组件的父组件。 $root 标记当前组件的根组件, 若存在父组件, 则当前组件的根组件为父组件的根组件;若不存在父组件, 则当前组件的根组件是当前组件自身。然后初始化当前组件的子组件列表、引用列表 ($children / $refs) 分别为空。然后初始化了观察者列表 _watchernull. 最后初始化了 _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 初始化事件

  1. vm._events 初始化了当前组件 vm 的事件存储对象, 默认是一个没有任何属性的空对象;
  2. 收集父组件上监听的事件对象,也就是监听器, 如果父组件上有监听器, 则和当前组件的监听器进行一系列对比,并更新。 具体逻辑详见下面 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 源码详解(二): 组件生命周期初始化、事件系统初始化的更多相关文章

  1. Vue源码学习(二)——生命周期

    官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...

  2. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  3. 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  4. OkHttp3源码详解(二) 整体流程

    1.简单使用 同步: @Override public Response execute() throws IOException { synchronized (this) { if (execut ...

  5. spring事务详解(三)源码详解

    系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...

  6. Shiro 登录认证源码详解

    Shiro 登录认证源码详解 Apache Shiro 是一个强大且灵活的 Java 开源安全框架,拥有登录认证.授权管理.企业级会话管理和加密等功能,相比 Spring Security 来说要更加 ...

  7. Activiti架构分析及源码详解

    目录 Activiti架构分析及源码详解 引言 一.Activiti设计解析-架构&领域模型 1.1 架构 1.2 领域模型 二.Activiti设计解析-PVM执行树 2.1 核心理念 2. ...

  8. udhcp源码详解(五) 之DHCP包--options字段

    中间有很长一段时间没有更新udhcp源码详解的博客,主要是源码里的函数太多,不知道要不要一个一个讲下去,要知道讲DHCP的实现理论的话一篇博文也就可以大致的讲完,但实现的源码却要关心很多的问题,比如说 ...

  9. 源码详解系列(六) ------ 全面讲解druid的使用和源码

    简介 druid是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,druid还扩展 ...

随机推荐

  1. 图解协程调度模型-GMP模型

    现在无论是客户端.服务端或web开发都会涉及到多线程的概念.那么大家也知道,线程是操作系统能够进行运算调度的最小单位,同一个进程中的多个线程都共享这个进程的全部系统资源. 线程 三个基本概念 内核线程 ...

  2. 通过winsw将jar包做成window后台服务运行

    第一步:下载Winsw地址 https://github.com/kohsuke/winsw/releases  第二步: 将下载好的sample-minimal.xml和WinSW.NET4.exe ...

  3. hdu 6034 贪心模拟 好坑

    关键在排序!!! 数组间的排序会超时,所以需要把一个数组映射成一个数字,就可以了 #include <bits/stdc++.h> using namespace std; typedef ...

  4. Redis 底层数据结构之链表

    文章参考:<Redis设计与实现>黄建宏 链表 链表提供了高效的节点重排能力,以及可以顺序访问,也可以通过增删节点灵活调整链表长度,Redis中的列表.发布订阅.慢查询.监视器等功能均用到 ...

  5. 1.6Java语言规范、API、JDK、和IDE

    要点提示:Java语言规范定义了Java的语法,Java库则在JavaAPI中定义.JDK是用于开发和运行Java程序的软件.IDE是快速开发程序的集成开发环境. 计算机语言有严格的使用规范.

  6. Linux | Shell脚本的编写

    Shell 脚本的介绍 Shell脚本通过Shell终端解释器当作人与计算机硬件之间的翻译官,用户可以通过它执行各种命令,不仅有简单的,还有复杂的,比如:判断.循环.分支等这些高级编程中才有的特性.S ...

  7. YAOI Round #3 题解

    前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/7 Div.2 : http://47.110.12.131:9016/contest/8 Div ...

  8. 『与善仁』Appium基础 — 3、ADB命令介绍

    目录 1.ADB命令简介 2.ADB命令运行原理 3.通过ADB命令连接安卓模拟器 (1)安装安卓模拟器 (2)ADB命令连接安卓模拟器 (3)常用Android模拟器端口号 1.ADB命令简介 AD ...

  9. 个人博客开发之blog-api 项目整合JWT实现token登录认证

    前言 现在前后端分离,基于session设计到跨越问题,而且session在多台服器之前同步问题,肯能会丢失,所以倾向于使用jwt作为token认证 json web token 导入java-jwt ...

  10. 高校表白App-团队冲刺第三天

    今天要做什么 今天开站立会议的时候,忽然发觉在一个完整的App上好像是有一些引导页的,比如说在第一次使用App的时候,或者是在使用App的时候会出现新手指引操作. 做了什么 通过查阅资料来学习View ...