An overview of the responsibilities of each life cycle of Vue components!

The life cycle of components in vue, what does each life cycle do, and what should be done in this life cycle?

[Related recommendations: vue.js video tutorial]

To understand when each life cycle is called

• 1.beforeCreate is called after the instance is initialized and before the data observer.

• 2.created is called after the instance has been created. At this step, the instance has completed the following configuration: data observer, operations on properties and methods, and watch/event event callbacks. There is no $el

• 3.beforeMount is called before the mount starts: the relevant render function is called for the first time.

• 4.mounted el is replaced by the newly created vm.$el and is mounted to the instance before calling this hook.

• 5.beforeUpdate is called when the data is updated, which occurs before the virtual DOM is re-rendered and patched.

• 6.updated This hook will be called after the virtual DOM is re-rendered and patched due to data changes.

• 7.beforeDestroy is called before the instance is destroyed. At this step, the instance is still fully available.

• 8.destroyed Called after the Vue instance is destroyed. After this call, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering

To understand what can be done inside each life cycle

• 1.created The instance has been created, because it is the earliest trigger and can make some data and resource requests.

• 2.mounted The instance has been mounted and some DOM operations can be performed

• 3.beforeUpdate You can further change the status in this hook , which does not trigger an additional re-rendering process.

• 4.updated Can perform operations that depend on the DOM. In most cases, however, you should avoid changing state during this period, as this may cause an infinite loop of updates. This hook is not called during server-side rendering.

• 5.destroyed can perform some optimization operations, clear timers, and unbind events

The above is the detailed content of An overview of the responsibilities of each life cycle of Vue components!. For more information, please follow other related articles on the PHP Chinese website!