VUE life cycle

01. What is the VUE lifecycle?

  • The lifecycle of a Vue instance is the process from creation to destruction. The life cycle of a Vue is a series of processes from the beginning of creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and destroying

02. What is the role of the VUE lifecycle?

  • Having multiple event hooks in the lifecycle makes it easier to form good logic while controlling the entire process of a Vue instance, adding your own code at different stages

03. How many phases are there in the VUE life cycle?

  • It can be divided into 8 stages altogether: before/after creation, before/after load, before/after update, and before/after destruction

(1) the Create

  • beforeCreate: Before data observation, data in data and methods are returnedNo initialization
  • created: Completed data observation, data and methods have beenIt’s initializedThe earliest you can manipulate data or methods is at this stage

(2) the Mount

  • beforeMountThe template is already compiled in memory, but not yetNot mounted to the pageAt this point, the page is old
  • MountedExample: the VueMount the completeThe in-memory compiled template replaces the DOM object pointed to by the EL attribute. At this point, the initialization is complete, leaving the creation phase and enteringOperation phaseThe earliest you can manipulate DOM nodes is at this stage

(3) the Update

  • BeforeUpdate: before the virtual DOM is rerendered and patched, the data displayed in the page is old, the data in the data is updated, the page has not been synchronized with the latest data.

  • Updated: The data displayed on the page is in sync with the data in data and is up to date for DOM-dependent operations

    You should avoid changing the state during this period, as this could cause an infinite update loop. This hook is not called during server-side rendering

(4) Destory

  • beforeDestory: Entered from the run phaseDestruction of phaseThe data is still available and has not actually been destroyed
  • Destroyed: All content is not available, the component has been destroyed, after the call, all event listeners are removed, all subinstances are destroyed. This hook is not called during server-side rendering

04. Extra cycles

(1) is activated

  • inkeep-aliveThis hook function is called only when the component is active; it is not called during server-side rendering

(2) the deactivated

  • inkeep-aliveCalled when the component is disabled

(3) the errorCaptured

  • Called when an error from a descendant component is caught

05. Which hooks will be triggered the first time the page loads?

  • It triggers the followingbeforeCreate, created, beforeMount, mounted

06. In what cycle is DOM rendering completed?

  • DOM rendering inmountedThis is already done in

07. Which periodic function is the data obtained?

  • In generalcreatedThe cycle will fetch the data
  • If it involves the need for the page to load after completion inmountedPeriodically obtain data

08. Created and Mounted

  • Created: Called before a template is rendered to HTML, usually by initializing some property values and then rendering to a view

  • Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized

  • Mounted initialization methods are usually used to initialize nodes. Active initialization methods are encapsulated in methods

  • Data initialization is typically placed in CREATED so that requests for data can be made early

  • If the dom dependency must exist, put it in Mounted

    mounted(){
    this.$nextTick(() = > {
        // do something})}Copy the code

How to re-execute a created hook function?

  • By switchingv-ifThe component goes through the process of being destroyed and loaded again

10. Lifecycle of nested components

(1) Mount stage

  • father.beforeCreate— >father.created— >father.beforeMount— >son.beforeCreate— >son.created— >son.beforeMount— >son.mounted— >father.mounted

(2) Update stage

  • father.beforeUpdate— >son.beforeUpdate— >son.updated— >father.updated

(3) Asynchronous components

  • father.beforeCreate— >father.created— >father.beforeMount— >father.mounted— >father.beforeUpdate— >son.beforeCreate— >son.created— >son.beforeMount— >son.mounted— >father.updated