网站设计 电子购物网站设计,手机app定制开发多少钱,wordpress文章手机平铺,最新国际消息文章目录 1. 前言2. initLifecycle函数分析3. 总结 1. 前言
在上篇文章中#xff0c;我们介绍了生命周期初始化阶段的整体工作流程#xff0c;以及在该阶段都做了哪些事情。我们知道了#xff0c;在该阶段会调用一些初始化函数#xff0c;对Vue实例的属性、数据等进行初始… 文章目录 1. 前言2. initLifecycle函数分析3. 总结 1. 前言
在上篇文章中我们介绍了生命周期初始化阶段的整体工作流程以及在该阶段都做了哪些事情。我们知道了在该阶段会调用一些初始化函数对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢接下来我们就把这些初始化函数一一展开介绍本篇文章介绍第一个初始化函数initLifecycle。
2. initLifecycle函数分析
initLifecycle函数的定义位于源码的src/core/instance/lifecycle.js中其代码如下
export function initLifecycle (vm: Component) {const options vm.$options// locate first non-abstract parentlet parent options.parentif (parent !options.abstract) {while (parent.$options.abstract parent.$parent) {parent parent.$parent}parent.$children.push(vm)}vm.$parent parentvm.$root parent ? parent.$root : vmvm.$children []vm.$refs {}vm._watcher nullvm._inactive nullvm._directInactive falsevm._isMounted falsevm._isDestroyed falsevm._isBeingDestroyed false
}可以看到initLifecycle函数的代码量并不多逻辑也不复杂。其主要是给Vue实例上挂载了一些属性并设置了默认值值得一提的是挂载$parent 属性和$root属性 下面我们就来逐个分析。
首先是给实例上挂载$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从代码中可以看到逻辑是这样子的如果当前组件不是抽象组件并且存在父级那么就通过while循环来向上循环如果当前组件的父级是抽象组件并且也存在父级那就继续向上查找当前组件父级的父级直到找到第一个不是抽象类型的父级时将其赋值vm.$parent同时把该实例自身添加进找到的父级的$children属性中。这样就确保了在子组件的$parent属性上能访问到父组件实例在父组件的$children属性上也能访问子组件的实例。
接着是给实例上挂载$root属性如下
vm.$root parent ? parent.$root : vm实例的$root属性表示当前实例的根实例挂载该属性时首先会判断如果当前实例存在父级那么当前实例的根实例$root属性就是其父级的根实例$root属性如果不存在那么根实例$root属性就是它自己。这很好理解举个例子假如有一个人他如果有父亲那么他父亲的祖先肯定也是他的祖先同理他的儿子的祖先也肯定是他的祖先我们不需要真正的一层一层的向上递归查找到他祖先本人只需要知道他父亲的祖先是谁然后告诉他即可。如果他没有父亲那说明他自己就是祖先那么他后面的儿子、孙子的$root属性就是他自己了。
这就是一个自上到下将根实例的$root属性依次传递给每一个子实例的过程。
最后再初始化了一些其它属性因为都是简单的赋初始值这里就不再一一介绍等后面内容涉及到的时候再介绍。
vm.$children []
vm.$refs {}vm._watcher null
vm._inactive null
vm._directInactive false
vm._isMounted false
vm._isDestroyed false
vm._isBeingDestroyed false3. 总结
本篇文章介绍了初始化阶段调用的第一个初始化函数——initLifecycle函数。该函数的逻辑非常简单就是给实例初始化了一些属性包括以$开头的供用户使用的外部属性也包括以_开头的供内部使用的内部属性。
