系列文章目录
文章目录
前言
Vue.js 生命周期指的是Vue实例的生命周期；
Vue实例的生命周期，指的是实例从创建到运行、再到销毁的过程。
通过设置生命周期函数，可以在生命周期的特定阶段执行功能。
生命周期函数也称生命周期钩子。
提示：以下是本篇文章正文内容，下面案例可供参考
一、创建阶段
特点：每个实例只能执行一次。
1.beforeCreate
beforeCreate 是 Vue 实例创建之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用的生命周期钩子函数。在这个阶段，实例的数据观测尚未开始，所以如果需要在此阶段进行数据观测，需要手动触发 $watch。
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 是 Vue 实例创建完成后被立即调用的生命周期钩子函数。在这个阶段，实例已经完成了数据观测 (data observer),事件配置等工作，因此可以放心地对 DOM 进行操作。通常在这个阶段进行一些初始化操作，如获取数据、设置事件监听等。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function() {
console.log('Vue instance created');
}
});
3.beforeMount
beforeMount 是挂载阶段之前被调用的生命周期钩子函数。在这个阶段，模板编译完成，但是还没有将虚拟 DOM 渲染到真实 DOM。这个阶段可以用来执行一些与 DOM 直接相关的操作，如修改 CSS、添加事件监听器等。需要注意的是，如果在这个阶段进行了 DOM 操作，可能会导致性能问题。因此，建议使用 Vue.js 提供的指令和计算属性来处理数据绑定和 DOM 操作。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeMount: function() {
// 在挂载前修改样式、添加事件监听器等操作
}
});
4.mounted
mounted 是挂载阶段结束后被调用的生命周期钩子函数。在这个阶段，实例已经成功挂载到 DOM,可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。
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) 避免上下文丢失的问题
}
});
二、运行阶段
特点：按需调用。
1.beforeUpdate
beforeUpdate 是数据更新时触发的生命周期钩子函数。在这个阶段，实例的数据仍然保持不变，因此可以放心地进行数据处理和计算属性的更新。如果在这个阶段进行了不必要的操作，可能会导致性能问题。建议使用计算属性来处理数据更新。
new Vue({
el: '#app',
data: {
_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
},
computed: {
message: function() {
return this._message; } // 将 _message 通过计算属性暴露给模板使用
},
beforeUpdate: function() {
} // 在数据更新前执行的操作，例如更新计算属性等
});
2.updated
updated 是数据更新后触发的生命周期钩子函数。在这个阶段，实例的数据已经被更新，可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。
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() {
} // 在数据更新后执行的操作，例如调用方法等
});
三、销毁阶段
特点：每个实例只能执行一次。
1.beforeDestroy
beforeDestroy 是组件销毁之前被调用的生命周期钩子函数。在这个阶段，实例仍然可以访问 DOM 和进行 DOM API 操作，但已经被标记为即将卸载。如果需要在组件销毁前进行一些清理操作，可以在这个阶段进行。
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
beforeUnmount: function() {
} // 在组件卸载前执行的操作，例如移除事件监听器等
});
2.destroyed
destroyed 是组件销毁后被调用的生命周期钩子函数。在这个阶段，实例已经从 DOM 中移除，所有与 DOM 相关的操作都不再有效。通常在这个阶段进行一些资源释放、清除定时器等操作。
new Vue({
el: '#app',
data: {
},
methods: {
},
beforeDestroy: function() {
// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
},
destroyed: function() {
} // 在组件销毁后执行的操作，例如关闭弹窗、清除定时器等
});
总结
Vue.js 是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，易于与其他库或已有项目集成。在 Vue.js 中，我们可以通过定义生命周期钩子函数来监听和操作 DOM 元素的变化，从而实现数据的双向绑定、组件化等功能。