Vue source code analysis (2)-componentization

1. Component initialization

1. Merge options: merge the constructor optionswith the Vueconstructor optionsor remove the constructoroptions

For details, see the chapter on parameter merging

2. Initialization data: as props, data, methodsetc.
3. Initialization is complete: call the createdhook

2. Component mounting

1. Definition update function: updateComponentmethod

The updateComponent method is divided into two parts:

1. Render part: generate vnode according to the render function, and generate mount vnode or component placeholder for sub-components.
2. Update part: Generate dom nodes based on vnode generated by render, and add attribute binding events for dom nodes.

2. New rendering watcher: the method watcherwill be called every time it is triggered updateComponentto recalculate the current component vnodeand update the page
3. When updating the page ( updatestage), if it encounters a mount vnode, it vnodeis a component, the component will be initialized, and the above steps will be repeated

3. Component update (diff)

1. The page update of the parent component is triggered first. When the parent component executes the diffalgorithm, it vnodewill modify the propsvalue of the child component when the component is mounted .
2. Modifying the propsvalue triggers the update of the sub-component page. Due to watcherthe asynchronous nature, the update will be performed in the next event loop
3. Compare whether the root node is equal, create a new one if it is not equal, domand execute the diffalgorithm of the sub-component if it is equal

4. Parameter combination (mixin)

1. mixinIn the phase, the Vueconstructor will mixinmount the configuration items under its own optionsproperties.
2. For the root component, merge the configuration items of the Vueconstructor optionswith its own configuration items in the initialization phase , and each attribute has a different merging strategy.
3. For sub-components, the vnodeconstructor of the current component will be built when the mount is created . After the constructor is built, the merge process will be executed to merge its configuration with Vuethe optionsproperties of the constructor .

5. Asynchronous Components

1. webpackSyntax for the loading of asynchronous components
2. In the vnodeprocess of building and mounting the subcomponent , the createComponentmethod is called
3. createComponentThe method will render the content in the constructor according to the returned constructor
4. Advanced asynchronous components use this method to return a different constructor to achieve loading, errorrendering the component itself
   

6. The life cycle sequence of parent and child components

Mounting process
Parent component beforeCreate
Parent component create
Parent componentbeforeMount

Sub-component beforeCreate
sub-component create
sub-component beforeMount
sub-componentmounted

The mounted
update process of the
parent component The parent component The beforeUpdate
child component The beforeUpdate
child updated
component The updated
destruction process of the
parent component The parent component The beforeDestroy
child component The beforeDestroy
child component The destroyed
parent componentdestroyed

For mounted, updated, destroyedprocess, are all parent component first call beforeafter the hook, and then passed to the sub-components, sub-assemblies to call a complete hook, then called by the parent component edhook