Article directory
1 Introduction
In the previous article, we introduced the overall workflow of the initialization phase of the life cycle and what was done during this phase. We know that some initialization functions will be called at this stage to Vueinitialize the attributes and data of the instance. So what are these initialization functions initialized and how are they initialized? Next, we will introduce these initialization functions one by one. This article introduces the first initialization function initLifecycle.
2. Analysis of initLifecycle function
initLifecycleThe definition of the function is located in the source code src/core/instance/lifecycle.js, and its code is as follows:
export function initLifecycle (vm: Component) {
const options = vm.$options
// 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)
}
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
}
It can be seen that initLifecyclethe code volume of the function is not much, and the logic is not complicated. It mainly Vuemounts some attributes on the instance and sets default values. It is worth mentioning that $parentthe attributes and $rootattributes are mounted, and we will analyze them one by one below.
The first is to mount $parentproperties on the instance. This property is interesting. Let's take a look at the code first:
let parent = options.parent
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
parent.$children.push(vm)
}
vm.$parent = parent
As you can see from the code, the logic is like this: if the current component is not an abstract component and there is a parent, then loop up through the loop, whileif the parent of the current component is an abstract component and there is a parent, then continue Look up the parent of the parent of the current component until it finds the first parent that is not an abstract type, assign it a value vm.$parent, and add the instance itself to $childrenthe properties of the found parent. This ensures that $parentthe instance of the parent component can be accessed on the properties of the child component, and $childrenthe instance of the child component can also be accessed on the properties of the parent component.
$rootNext is to mount properties on the instance , as follows:
vm.$root = parent ? parent.$root : vm
The attribute of the instance $rootindicates the root instance of the current instance. When mounting this attribute, it will first judge that if the current instance has a parent, then the root instance attribute of the current instance $rootis the root instance attribute of its parent $root. If it does not exist, the root instance $rootattribute It is itself. This is easy to understand, for example: if there is a person, if he has a father, then his father's ancestors must also be his ancestors, similarly, his son's ancestors must also be his ancestors, we do not need a real one Recursively find his ancestor himself layer by layer, just need to know who his father's ancestor is and tell him. If he does not have a father, it means that he himself is an ancestor, and the attributes of the sons and grandsons behind him $rootare himself.
$rootThis is a process of transferring the properties of the root instance to each child instance in turn from top to bottom .
Finally, some other attributes are initialized, because they are all simply assigned initial values, so I won’t introduce them one by one here, and I will introduce them later when the content is involved.
vm.$children = []
vm.$refs = {
}
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false
3. Summary
This article describes the first initialization function called in the initialization phase - initLifecyclethe function. The logic of this function is very simple, that is, some properties are initialized for the instance, including $external properties starting with , which are used by users, and _internal properties starting with , which are used internally.