Table of contents
introduction
Vue.js is a popular JavaScript framework for building user interfaces. It adopts a componentized development model, and components are one of the core concepts of Vue.js. The life cycle of a Vue component means that the Vue instance will automatically call a series of hook functions when the component is created, rendered and destroyed. These hook functions can be used to perform specific operations at different stages of the component, such as data initialization, DOM manipulation, asynchronous requests, etc. In-depth analysis of each stage in the life cycle of Vue components will help developers better understand and utilize the features of components.
In the lifecycle of a Vue component, there are a total of eight different phases: 创建前, 创建中, 创建后, 挂载前, 挂载后, 更新前, 更新后and 销毁. Each stage has a corresponding hook function 钩子函数, and the following will introduce the hook function of each stage one by one, and give relevant code arguments.
Pre-creation stage:
beforeCreate:实例初始化called after, before data observation and event configuration. At this point, the data and methods of the component have not been initialized.- Initialization example, prior to data observation and event configuration.
new Vue({
beforeCreate() {
console.log('beforeCreate hook');
},
// ...
});
In construction stage:
created: is实例创建完成后being called. At this point, the data of the component has been initialized, and other initialization work can be performed, such as asynchronously requesting data, adding event listeners, etc.
new Vue({
created() {
console.log('created hook');
},
// ...
});
Post-creation stage:
beforeMount: is挂载开始之前being called. At this point, the component's template has been compiled, but the actual DOM nodes have not yet been generated.- Called before rendering the template to the virtual DOM.
new Vue({
beforeMount() {
console.log('beforeMount hook');
},
// ...
});
Pre-mount stage:
mounted: isDOM 元素挂载到页面后called at . At this point, the component's template has generated real DOM nodes, and DOM operations can be performed, such as obtaining the width and height of elements, binding third-party plug-ins, and so on.
new Vue({
mounted() {
console.log('mounted hook');
},
// ...
});
Post mount phase:
beforeUpdate: is数据更新之前being called. At this point, the component's data has changed, but the DOM has not yet been re-rendered.- Called before each re-render.
new Vue({
beforeUpdate() {
console.log('beforeUpdate hook');
},
// ...
});
Pre-update stage:
updated: is数据更新完成后being called. At this point, the data of the component has changed and the DOM has been re-rendered.
new Vue({
updated() {
console.log('updated hook');
},
// ...
});
Post update stage:
beforeDestroy:销毁之前is called on the component. At this point, the component instance still exists, and aftermath operations can be performed, such as clearing the timer, canceling event listening, and so on.- Called before the component is destroyed.
new Vue({
beforeDestroy() {
console.log('beforeDestroy hook');
},
// ...
});
Destruction phase:
destroyed:销毁后is called on the component. At this point, the component instance has been destroyed and no further operations can be performed.
new Vue({
destroyed() {
console.log('destroyed hook');
},
// ...
});
By in-depth analysis of each stage in the life cycle of Vue components, you can better understand the process of creating, mounting, updating and destroying components, and make corresponding operations in different stages. The design of this hook function enables developers to control and manage components conveniently, improving development efficiency and user experience.
Summarize
To sum up, each stage in the Vue component life cycle has a corresponding hook function, through which specific operations can be performed at different stages. In-depth understanding and utilization of these hook functions can optimize the performance of components, realize complex functions and improve user experience. In actual development, it is very important to make reasonable use of the component life cycle, which can help us write more efficient and robust Vue components.