describe
Vue instance
An instance of vue is actually a complex object, where attributes such as data, Methods, and computed are mounted on the prototype of vue. When we access these attributes, this points to the instance of Vue, so we rarely use the arrow function when defining this attribute in vue. If you use the arrow function this might point to window.
Initialize the
Each vUE instance is created with a series of initializations, such as initializing events and data, listening to data, compiling templates, rendering functions to render vNode, and generating views. During this time, the lifecycle hook functions are triggered, allowing us to customize the code at each stage.
The life cycle of a VUE instance can be divided into four phases: initialization phase, template compilation phase, mount phase, and unload phase.
Life cycle initialization phase
Between creating an instance and creating we call that the initialization phase. The main initialization of some properties, events, part of the data. Props, methods, data, watch, etc.
Above is the vUE source code in the internal flow chart of init, the article will be introduced in turn each initialization of the general content.
Initialize the vm. $options
Before initialization, vue mounts the optins property. When the page builds the life cycle function (options), the instance constructor options will merge the options parameter to the vM. optins property. The options of the instance constructor merges the options parameter and assigns it to the vm.optins property. When the page builds the lifecycle function (options), the options of the instance constructor merges the options parameter and assigns it to the Vm. optins property. So we can use vm.$options. XXX to get the user’s lifecycle function, data, and other properties.
Initialize the lifecycle
InitLifecycle is used to load properties related to the lifecycle. Vue. js adds properties to the instance through this function. This function iterates over the properties of the children and parents passed to vm.
Initialization event
An initialization event is an event added by the parent component via v-ON to the vUE event system. (There is a problem with this example, which will be fixed later)
Initialize inject/ provide
Inject and provide generally come in pairs and allow ancestor components to inject dependencies into descendant components. In practical application, we use the two-pair method to achieve cross-component value transmission, the specific content can be baidu. The initial piece of content implements the inject and provide methods for each component.
Initialization state
Some of the states in VUE, such as props, methods, data, computed, watch, and so on, need to be initialized before they can be used (more on how these five properties are initialized later).
Application scenarios
Life cycle beforeCreate: Performs operations before attributes such as props, Mothods, computed, and data are initialized. For example, the loading effect is cancelled when created.
Life Cycle Created: : Writes custom code when attributes such as props, Mothods, computed, and data are initialized but $EL is not rendered, for example, requesting back-end data, initializing some attributes, and loading effect.
Life cycle Template compilation phase
The phase between the created dot beforeMount is the template compilation phase. The main goal of template compilation is to generate the render function, which can be divided into three parts logically:
- Parse the template into an AST
- Traverse the AST static tag node
- Use the AST to generate the render function
Application scenarios
- Example Initialize a VNode
- Make changes to the data
- Make rendering rules
Life cycle Mount phase
BeforeMount the stage between Mount and Mounted is the mount stage. In this stage, the rendering function generates a virtual DOM, which then renders the DOM node. During the mount process, Vue will enable watcher to track changes in the dependency. When the data changes, Watcher informs the virtual DOM to rerender the DOM.
Rendering the virtual DOM
Looking at the console VNode, we see that the vnode is rendered by the render function only during the mount phase. There are many types of VNode such as text node, element node, and comment node. These nodes correspond to the corresponding dom nodes. The process of mounting is actually the process of VNode producing the DOM and inserting the view.
application
- Fetching a node for manipulation or access, such as rendering a map, fetching an element height, and so on.
- Perform page optimization.
Life cycle Unload phase
At this stage vue will remove itself from the parent, cancel all trace in the instance and remove all event listeners.
The detailed content of the article will be updated continuously in the future. Please understand the shortcomings of the article