1. Understand the lifecycle

A person has a complete cycle from birth to death, and of course our VUE also has a life cycle. The life cycle is divided into four phases.

  • Before creation: beforeCreate, created after creation.
  • BeforeMount: beforeMount, mounted after mounting.
  • BeforeUpdate: beforeUpdate, after update: updated.
  • BeforeDestroy: beforeDestroy, After destroy: Destroyed.

2. Discuss the application scenarios of each life cycle

  1. BeforeCreate: vueAfter instance creation is initialized.methodsandwatchNone of the method events are initialized, there is nothing to do here, you can add a loading animation at this time.
  2. Created: Mount data and bind events (IN the project, I feel the most frequently used is created, which has the highest participation rate in mount data and bind point events). It is mainly used for a series of data operations. You can also cancel the loading animation here, note that the DOM is still virtual and cannot be operated.
  3. BeforeMount: When the hook is called,Start looking for a template for the instance or componentThe compiled template is put into the virtual DOMrenderFunction is ready to render, while the DOM is still inoperable
  4. Mounted: Specifies that the hook is mountedrenderRender the real DOM inThis is where you manipulate the actual DOMThe DOM-dependent code can be placed here.
  5. BeforeUpdate:dataWhen changes occur, before the virtual DOM patch is updated, this fits inAccess data that was not changed before the updateThe DOM.
  6. Updated:dataChanges will cause the virtual DOM to be re-rendered and patched, when calledupdatedHook, where you can access dataUpdated DOM
  7. BeforeDestroy: Before the instance or component is destroyed, inbeforeDestroyThe hook is called, and the instance is still available, called in this hookmethodsThe event in the
  8. Destroyed: Called after the instance has been destroyed. The instance is destroyed completely, connections to other instances are cleared, and instructions and events are unbound.
  9. ErrorCaptured :(2.5.0+ new) is a component hook function that catches exceptions at the component level. When the hook function returnsfalsePrevents the exception from bubbling up further, otherwise it will be continuously passed to the parent component

Created is used to retrieve background data. Mounted is used to perform DOM operations after dom mounting.

Three personal insights into the life cycle

In my personal understanding, the VUE life cycle is actually tied to the browser rendering process. In the Beforecreate phase, for the browser, the entire rendering process has not started or is ready to start, for the VUE, the instance has not been initialized. Data Observer and Event/Watcher have also not been called, and calls to data, methods, or document nodes at this stage now do not yield the correct data. In the creation stage, when the browser renders the entire HTML document,dom nodes, CSS rule trees and JS files are parsed but not entered into the render process of the browser. The above resources are not mounted on the page, which is the corresponding Creation in the vUE life cycle. In eforeMount stage, actually similar to the Created stage, the node has not been mounted, but the data in data and methods can still be obtained. In the Mounted stage, the browser receives the command to render the DOM and CSS rule tree, and completes the layout of the render tree. The browser calls paint () to display the page, and a complete page is displayed.