What is a lifecycle function?

Life cycle function (Lifecycle hook) is a function that executes automatically at a certain point in time

BeforeMount, mounted, beforeupdata, updated, beforeDestroy, beforeCreate, created, beforeMount, mounted, beforeupdata, updated, beforeDestroy, new Vue () Destroyed).

The following figure shows the life cycle diagram of vUE official website documents

There are actually many steps involved in running a lifecycle function. The event and life cycle function are first initialized, and the beforeCreate function is executed after this point in time

Vue then handles some of the external injection and bidirectional binding, and once this is initialized, the Created function is executed

A logical check is then made to see if there is an EL mount, and then to see if there is a ‘template’ attribute, using the contents of the ‘template’ attribute if there is, and the contents of the EL mount if there is not

BeforeMount the template is combined with data and is mounted to the page. After the page is mounted, run mounted

beforeMount: function () {
            console.log(this.$el);
            console.log("beforeMount");
            },
  mounted: function () {
            console.log(this.$el);
            console.log("mounted");
Copy the code

This is obtained after executing the above code

BeforeMount the template is not yet combined with data, and mounted is already mounted when it is executed

BeforeDestroy is executed when the vm.$destroy() method is called to destroy the component,

The destroy function is executed when the component is destroyed

You can see that the beforeupData function is executed when data changes (before data is re-rendered), and the updated function is executed after data is re-rendered

Three other lifecycle functions are special: activated (when a keep-alive component is activated), deactivated (when a keep-alive component fails) and errorCaptured(when an error from a descendant component is captured).