目录
前言
Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。Vue 实例在其生命周期中经历不同的阶段，每个阶段都触发特定的钩子函数，使开发者能够在不同的时机执行自定义的逻辑。Vue 的生命周期可以分为创建阶段、更新阶段和销毁阶段。
创建阶段（Creation）
beforeCreate（创建前）
- 在实例初始化之后，数据观测（data observer）和事件配置之前被调用。
- 此时实例还未初始化完成，无法访问数据和方法。
created（创建后）
- 在实例创建完成后立即调用。
- 可以访问数据和方法，但是模板编译还未开始，DOM 元素还未挂载。
beforeMount（挂载前）
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted（挂载后）
- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
- 可以访问到挂载后的 DOM 元素。
更新阶段（Updating）
beforeUpdate（更新前）
- 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated（更新后）
- 在数据更改导致的重新渲染和打补丁之后调用。
- 可以访问更新后的 DOM 元素。
销毁阶段（Destruction）
beforeDestroy（销毁前）
- 在实例销毁之前调用。此时实例仍然完全可用。
destroyed（销毁后）
- 在实例销毁后调用。
- 所有的事件监听器被移除，所有的子实例也被销毁。
例子
new Vue({
data() {
return {
message: 'Hello, Vue!'
};
},
beforeCreate() {
console.log('beforeCreate: ', this.message);
},
created() {
console.log('created: ', this.message);
},
beforeMount() {
console.log('beforeMount: ', this.$el);
},
mounted() {
console.log('mounted: ', this.$el);
},
beforeUpdate() {
console.log('beforeUpdate: ', this.message);
},
updated() {
console.log('updated: ', this.message);
},
beforeDestroy() {
console.log('beforeDestroy: ', this.message);
},
destroyed() {
console.log('destroyed: ', this.message);
}
});
以上代码演示了 Vue 实例生命周期各个阶段的钩子函数。在实际应用中，可以利用这些钩子函数执行一些初始化、清理、数据请求等操作
我的其他博客
什么是tomcat？tomcat是干什么用的？-CSDN博客
腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客Synchronized 优化-CSDN博客腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客
