Vue 2 阅读理解(十)之 生命周期初始化

简介: Vue 2 阅读理解(十)之 生命周期初始化

initLifecycle 生命周期初始化


new Vue 过程 一节中,讲到 Vue 实例在初始化的时候会执行 _init() 方法。其中首先是执行配置的标准化与配置合并 MergeOptions


在配置合并完成之后,就会调用 initLifecycle(vm) 来进行实例声明周期的初始化了。

initLifecycle 方法的代码与定义 Vue 构造函数时候使用的 lifecycleMixin 方法在同一个文件下,位于 src/core/instance/lifecycle.ts


export function initLifecycle(vm: Component) {
  const options = vm.$options
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm
  vm.$children = []
  vm.$refs = {}
  vm._provided = parent ? parent._provided : Object.create(null)
  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}


vm.$options 就是合并后的完整配置


这里有一段查找 parent 实例的代码


let parent = options.parent
if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent
  }
  parent.$children.push(vm)
}
vm.$parent = parent


这里的核心逻辑就是:如果 当前的组件不是抽象组件 并且 具有父级组件配置,就从 options 配置中向上层查找,直到找到第一个 不是抽象组件 的实例,在该实例的 $children 子实例数组中插入当前实例。并更新当前实例的父元素实例为那个非抽象实例。


然后会绑定这个组件关系里面的根组件root


vm.$root = parent ? parent.$root : vm


这里其实也好理解。因为组件的实例化过程是从 最外层模板向内解析 ,当开始处理当前的实例的时候,如果存在父级,那么父级组件实例绑定的根组件实例一定也是当前实例的根组件。如果连父组件实例都没有的话,那么当前组件一定是在最外层,所以它自己就是根组件(这里把 $root 指向自身,也是为了子组件实例能够正确的获取到根组件实例)。


最后,则是初始化一些组件注入数据、监听依赖,和组件的生命周期标志


vm.$children = [] // 子组件实例数组
vm.$refs = {} // refs 绑定数据,包括 dom 实例和组件实例
vm._provided = parent ? parent._provided : Object.create(null) // 上层注入的数据
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false  // 生命周期标识
vm._isDestroyed = false
vm._isBeingDestroyed = false


目录
相关文章
|
2月前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
4天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
16 0
|
4天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
13 0
|
20天前
|
JavaScript 前端开发 API
Vue3基础(十yi)___常用生命周期函数___setup___onMounted___onUpdated
本文介绍了Vue 3中的常用生命周期函数,包括`setup`、`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`和`onUnmounted`,并解释了它们与Vue 2生命周期钩子的对应关系。文章通过代码示例展示了这些生命周期钩子在组件中的使用时机和场景。
22 0
|
2月前
|
JavaScript 前端开发 程序员
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
这篇文章详细介绍了Vue的生命周期和各个阶段的钩子函数,包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`。文章通过图解、方法说明、代码实例和测试效果,阐述了每个钩子函数的作用和使用场景,帮助读者深入理解Vue实例从创建到销毁的整个过程。
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
|
2月前
|
JavaScript Linux 开发工具
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!
|
2月前
|
JavaScript API 开发者
Vue的生命周期,创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。
【8月更文挑战第1天】Vue的生命周期,创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。
49 11
|
2月前
|
JavaScript 开发者
揭秘Vue.js生命周期钩子:它们是如何掌控组件的生与死?
【8月更文挑战第30天】Vue.js 的生命周期钩子是开发者必须掌握的关键概念,它涵盖了组件从创建、挂载、更新到销毁的整个过程,提供了在特定时机操作DOM、获取数据或执行逻辑的能力。从 `beforeCreate` 到 `unmounted`,每个阶段都有特定的任务:如 `created` 适合异步数据获取,`mounted` 用于DOM操作,而 `beforeUnmount` 则用于清理资源。
17 0
|
2月前
|
缓存 JavaScript API
vue学习之生命周期钩子
生命周期钩子
18 0
|
2月前
|
JavaScript 前端开发 开发者
vue生命周期
【8月更文挑战第1天】vue生命周期
33 2