Vue Life cycle

As one of the cores of VUE, life cycle is a high-frequency knowledge point whether it is document or interview. Today, we will start from what is life cycle, the content of life cycle and how to use life cycle to do some research

Understanding the life cycle

  • Official: The life cycle of a Vue instance is the process from creation to destruction. This is the process from start to create, initialize the data, compile the template, mount the Dom, render, update, render, uninstall, and so on. We call this the life cycle of Vue

  • In general: When a page is loaded, a vue instance is created to display the page,

    The first stage

    • The first start is to create, that is, “beforeCreate”, this stage, the initial instance is created, has not been initialized, is a basic template, without any data and events of the smooth bar,

    • Then you go to the “created” phase, where the instance is created and the function in the hook is called immediately, the data Observer, the watch/ Event callback properties and methods are configured, and the page elements are not initialized.

    • The next step is to start mounting the DOM node for operation, before the “beforeMount” phase, when the related render function is called for the first time and the page elements and data are initialized.

    • Then “mounted” stage, properties, methods, page elements, has the data also, so this stage will be to manipulate, the DOM node to mount, and mount after the call function in the hook, so most of the functions in this inside, because here the start can manipulate the DOM

    The second stage

    • When the data is rendered and the page is displayed in the first stage, when you want to interact with the data, the first stage is “beforeUpdate”, which occurs when the data update is called and the DOM has not been rerendered. At this time, the state can be further changed without triggering the rerendering process
    • The “updated” phase, in which the DOM and re-render can perform the action of manipulating the new DOM, should be avoided, as this is likely to result in a wireless update loop
    • The “beforeDestroy” phase, where the previous phase’s behavior is best used, is the last full preservation before the instance is destroyed
    • $destroy() ¶ “Destroyed this.$destroy()”; everything related to the instance is destroyed.

    “Beforecreate” : you can add a “loading” event here that triggers the “created” event when the instance is loaded: Mounted () : the DOM node is loaded () : the DOM node is loaded () : the DOM node is loaded () : the DOM node is loaded () : the DOM node is loaded () If data is processed uniformly, put the function “beforeDestroy” here: You can make a “confirm stop event confirmation box”

    Classical life cycle diagram

    img

This picture has not understand can look up the above vernacular, and do not understand can leave a message, saw will try to answer, later will update the source code with understanding