Series Article Directory
Vue.js basic short answer questions
Article directory
foreword
The Vue.js life cycle refers to the life cycle of a Vue instance;
the life cycle of a Vue instance refers to the process from creation to operation to destruction of the instance.
By setting a lifecycle function, functions can be executed at specific stages of the lifecycle.
Lifecycle functions are also called lifecycle hooks.
提示：以下是本篇文章正文内容，下面案例可供参考
1. Creation stage
Features: Each instance can only be executed once.
1.beforeCreate
beforeCreate is a lifecycle hook function that is called after the Vue instance is created and before the data observer and event/watcher event configuration. At this stage, the data observation of the instance has not yet started, so if data observation is required at this stage, $watch needs to be triggered manually.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function() {
this.$watch('message', function(newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal);
});
}
});
2.created
created is a lifecycle hook function that is called immediately after the Vue instance is created. At this stage, the instance has completed data observer, event configuration, etc., so you can safely operate on the DOM. Usually, some initialization operations are performed at this stage, such as obtaining data, setting event monitoring, and so on.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function() {
console.log('Vue instance created');
}
});
3.beforeMount
beforeMount is a lifecycle hook function called before the mount phase. At this stage, the template is compiled, but the virtual DOM has not been rendered to the real DOM. This stage can be used to perform some operations directly related to DOM, such as modifying CSS, adding event listeners, etc. It should be noted that if DOM manipulation is performed at this stage, it may cause performance problems. Therefore, it is recommended to use the directives and computed properties provided by Vue.js to handle data binding and DOM manipulation.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeMount: function() {
// 在挂载前修改样式、添加事件监听器等操作
}
});
4.mounted
mounted is a lifecycle hook function that is called after the mount phase ends. At this stage, the instance has been successfully mounted to the DOM, and DOM API access and other asynchronous operations can be performed with confidence. Usually some operations that depend on DOM or network requests are performed at this stage.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted: function() {
// 在挂载后修改样式、访问 DOM、发送网络请求等操作
$.get('https://api.example.com/data').then(function(data) {
Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
}
});
2. Operation stage
Features: call on demand.
1.beforeUpdate
beforeUpdate is a lifecycle hook function triggered when data is updated. At this stage, the instance's data remains unchanged, so data manipulation and updates to computed properties can be performed with confidence. If unnecessary operations are performed at this stage, it may cause performance problems. It is recommended to use computed properties to handle data updates.
new Vue({
el: '#app',
data: {
_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
},
computed: {
message: function() {
return this._message; } // 将 _message 通过计算属性暴露给模板使用
},
beforeUpdate: function() {
} // 在数据更新前执行的操作，例如更新计算属性等
});
2.updated
updated is a lifecycle hook function triggered after the data is updated. At this stage, the instance's data has been updated, and DOM API access and other asynchronous operations can be performed with confidence. Usually some operations that depend on DOM or network requests are performed at this stage.
new Vue({
el: '#app',
data: {
_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
},
computed: {
message: function() {
return this._message; } // 将 _message 通过计算属性暴露给模板使用
},
methods: {
fetchData: function() {
$.get('https://api.example.com/data').then(function(data) {
Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
}
},
updated: function() {
} // 在数据更新后执行的操作，例如调用方法等
});
3. Destruction stage
Features: Each instance can only be executed once.
1.beforeDestroy
beforeDestroy is a lifecycle hook function called before the component is destroyed. At this stage, the instance can still access the DOM and perform DOM API operations, but has been marked for unloading soon. If you need to do some cleanup before the component is destroyed, you can do it at this stage.
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
beforeUnmount: function() {
} // 在组件卸载前执行的操作，例如移除事件监听器等
});
2.destroyed
destroyed is a lifecycle hook function that is called after the component is destroyed. At this stage, the instance has been removed from the DOM, and all DOM-related operations are no longer valid. Usually at this stage, some operations such as resource release and timer clearing are performed.
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
destroyed: function() {
} // 在组件销毁后执行的操作，例如关闭弹窗、清除定时器等
});
Summarize
Vue.js is a progressive framework for building user interfaces. Its core library only focuses on the view layer and is easy to integrate with other libraries or existing projects. In Vue.js, we can monitor and manipulate changes in DOM elements by defining life cycle hook functions, so as to realize two-way binding of data, componentization and other functions.