1. Life cycle function

1. What is the VUE lifecycle?

The lifecycle of a Vue instance is the process from creation to destruction. The process of creating, initializing the data, compiling the template, mounting the DOM-render, update-render, unmount, etc., is called the Vue life cycle.

2. What is the role of the VUE lifecycle

All functions of Vue are implemented around its life cycle. Calling corresponding hook functions at different stages of the life cycle can realize two important functions of component data management and DOM rendering. Having multiple event hooks in the lifecycle makes it easier to form good logic when controlling the process of an entire VUE instance.

3. Which hooks trigger the first page load?

BeforeCreate, created, beforeMount, Mounted

4. Describe the specific scenarios for each cycle.

  • BeforeCreate: before creation, this stage is after instance initialization, and this points to the created instance. At this time, the data observation event mechanism has not been formed, and DOM nodes cannot be obtained.

    Methods and data on data, computed, watch, and methods cannot be accessed.

    You can add a loading event here.

  • Created: Indicates that an instance has been created, and initialization of imported dependencies for data (data, props, and computed) is complete.

    Access methods and data on Data Computed Watch Methods.

    Initialization events are written here, and asynchronous requests are called here as well (not too many requests to avoid a long white screen).

    You can end the loading event here and do some initialization so that the function executes itself.

    The DOM is not mounted. If you do DOM operations at this stage, you must put them in the vue.nexttick () callback function.

  • BeforeMount: Before mounting, the root node to which vue is mounted is created, although the specific DOM element is not available. The following vue operations on the DOM continue around this root element.

    BeforeMount This phase is transitional and is usually used only once or twice for a project.

  • Mounted: The VM.$el is mounted. The VM is bound to the mounted vm

    After mounting and rendering the DOM, you can operate on the mounted DOM in the Mounted hook function.

    This is where you make a back-end request, get your data back, and do something with the routing hook.

  • BeforeUpdate: Data drives the DOM before data updates.

    Although the data is not updated immediately after the data is updated, the data in the DOM changes, which is the function of vUE two-way data binding.

    You can access the existing DOM before updating, for example by manually removing the added event listener.

  • Updated: After data is updated, the virtual DOM is rerendered and patched.

    The component DOM has been updated to perform dependent DOM operations.

    Note: Do not manipulate data (modify attributes) in this function; you will get stuck in an infinite loop.

  • Activated: When using ue-router, the
    is used to cache component state, so created hooks are not called repeatedly.

    If our child component needs to do something every time it loads, we can use the Activated hook to trigger it.

  • Deactivated:
    Used when the component is removed.

  • BeforeDestroy: Before destroying,

    You can do some deletion prompts, such as: are you sure to delete XX?

  • Destroyed: The current component is deleted and listens for events. The component, event, and subinstance are also destroyed.

    The component is gone and you can’t manipulate anything inside it.

5. Lifecycle of parent and child components
  • Order of execution:
    • Parent component starts execution up to beforeMount then begins child component execution and finally parent component Mounted.
    • If there are siblings, the parent component starts to run beforeMount, then the siblings continue to run beforeMount, then mount in sequence, and finally the parent component mounts.
  • The parent component is mounted only after the child component is mounted.
  • When the child finishes hanging, the parent actively executes the beforeUpdated/updated hook function (first only)
  • Parent and child components are monitored separately during data changes, but the data in the update props is associated.
  • When a parent component is destroyed, the child component is destroyed before the parent component is destroyed.
  • Before Mounted, sibling components are initialized separately and mounted from top to bottom
  • When there is no data correlation, updates and destruction between sibling components are disconnected

The above is a summary of a lot of peer sharing and official documents, if there is any wrong, please point out, finally thank you for watching, for praise, for share, for comments, for rewards ~~