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


目录
相关文章
|
1天前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
35 3
|
1天前
|
JavaScript API 开发者
vue3的生命周期
Vue3 保留了大部分 Vue2 的生命周期钩子,`同时引入了 Composition API`,为开发者提供了更灵活的逻辑复用和组织方式。以下是 Vue3 中组件生命周期的详细介绍
|
2天前
|
JavaScript
在vue中,在哪个生命周期内调用异步请求?
在vue中,在哪个生命周期内调用异步请求?
42 0
|
1天前
|
JavaScript
在vue中,Vue 的父组件和子组件生命周期钩子函数执行顺序?
在vue中,Vue 的父组件和子组件生命周期钩子函数执行顺序?
21 0
|
1天前
|
JavaScript
在vue中,谈谈你对 Vue 生命周期的理解?
在vue中,谈谈你对 Vue 生命周期的理解?
18 0
|
1天前
|
JavaScript
深入理解Vue生命周期钩子及其应用
深入理解Vue生命周期钩子及其应用
6 0
|
1天前
|
JavaScript 前端开发
深入理解Vue生命周期钩子及其应用
深入理解Vue生命周期钩子及其应用
9 0
|
1天前
|
JavaScript 前端开发 API
Vue生命周期:在虚拟世界的牵绊与自由
Vue生命周期:在虚拟世界的牵绊与自由
18 1
|
1天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
1天前
|
JavaScript
【vue】生命周期钩子函数的执行过程和父子组件钩子函数的执行顺序
【vue】生命周期钩子函数的执行过程和父子组件钩子函数的执行顺序
11 1