Detailed explanation of life cycle

Interview question: new VueWhat happened after that? What happened after the data changed?

1. The process of creating a Vue instance and creating a component are basically the same.

   1. First do some initialization operations, mainly setting some private properties to the instance.

   2. Run life cycle hook functionbeforeCreate

   3. Enter the injection process: process attributes, computed, methods, data, provide, inject, and finally use the proxy mode to mount them into the instance

   4. Run life cycle hook functioncreated

   5. Generate renderfunction: If there is a configuration, use the configured one directly render. If not, use the runtime compiler to compile the template intorender

   6. Run life cycle hook functionbeforeMount

   7. Create one Watcher, pass in a function updateComponent, the function will run , and then pass the renderresult into the function for execution.vnode_update

      During renderthe execution of the function, all dependencies will be collected, and updateComponentthe function will be re-run when the dependencies change in the future.

      During the execution _updateof the function, patchthe function is triggered. Since there is currently no old tree, the elm attribute, that is, the real dom, is directly generated for each ordinary node of the current virtual dom tree.

      If you encounter a vnode that creates a component, you will enter the component instantiation process, which is basically the same as the process of creating a vue instance. Finally, the created component instance will be mounted in the componentInstanceproperties of the vnode for reuse.

   8. Run life cycle hook functionmounted

2. Re-render?

   1. After the data changes, everything that depends on the data Watcherwill be re-run. Only updateComponentthe functions corresponding to the function are considered here.Watcher

   2. WatcherIt will be run by the scheduler nextTick, that is, in a micro queue. This is to avoid multiple dependent data being executed multiple times after being changed at the same time.

   3. Run life cycle hook functionbeforeUpdate

   4. updateComponentFunction re-execution

      During the execution renderof the function, the previous dependencies will be removed and all dependencies will be re-collected. updateComponentThe function will be re-run when the dependencies change in the future.

      During _updatethe execution of the function, patchthe function is triggered.

      Compare the old and new trees.

      Comparison of ordinary htmlnodes will cause real nodes to be created, deleted, moved, and updated.

      Comparison of component nodes will cause components to be created, deleted, moved, and updated

      When a new component needs to be created, enter the instantiation process

      When an old component needs to be deleted, the old component's $destroymethod will be called to delete the component. This method will first trigger the life cycle hook functionbeforeDestroy , then recursively call the child component's $destroymethod, and then trigger the life cycle hook function.destroyed

      When the component properties are updated, updateComponentthe function equivalent to the component is retriggered and executed, entering the re-rendering process, the same as this section.

   5. Run life cycle hook functionupdated

​

​