Vue 的各个生命周期

详解 Vue 的各个生命周期

文章目录

Vue 组件的生命周期

在 Vue 中,组件的生命周期可以被划分为创建、运行和销毁三个阶段。以下是每个阶段的重要生命周期钩子。

1.1 创建阶段

在这个阶段,组件开始创建。包括了以下几个生命周期钩子:

  • beforeCreate:在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。
  • created:在实例被创建后调用。此时实例已被完全设置,包括数据观测和属性初始化。
示例:
javascript 复制代码
new Vue({
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    beforeCreate() {
        console.log('beforeCreate: 实例刚被创建,数据未初始化');
    },
    created() {
        console.log('created: 实例已创建,数据准备就绪:', this.message);
    }
});

1.2 挂载阶段

在这个阶段,组件被挂载到 DOM 上。包括以下生命周期钩子:

  • beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
  • mounted:在挂载完成后被调用,此时组件的 DOM 结构已被渲染并且可以访问。
示例:
javascript 复制代码
new Vue({
    el: '#app',
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    beforeMount() {
        console.log('beforeMount: 组件即将挂载,还未渲染到 DOM');
    },
    mounted() {
        console.log('mounted: 组件已挂载,当前 DOM:', this.$el);
    }
});

1.3 更新阶段

这个阶段是组件数据发生变化后,组件的重新渲染。相关生命周期钩子有:

  • beforeUpdate:在数据发生变化,DOM 更新之前被调用。
  • updated:在 DOM 更新完成后被调用。
示例:
javascript 复制代码
new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    },
    beforeUpdate() {
        console.log('beforeUpdate: 数据即将更新,当前 count:', this.count);
    },
    updated() {
        console.log('updated: DOM 更新完成,新的 count:', this.count);
    }
});

1.4 销毁阶段

这个阶段是组件被销毁的时刻,相关生命周期钩子有:

  • beforeDestroy:在实例销毁之前调用,此时仍可以访问实例。
  • destroyed:在实例被销毁后调用,所有的事件监听器将被移除。
示例:
javascript 复制代码
new Vue({
    el: '#app',
    data() {
        return {
            isVisible: true
        }
    },
    beforeDestroy() {
        console.log('beforeDestroy: 组件即将被销毁');
    },
    destroyed() {
        console.log('destroyed: 组件已被销毁');
    },
    template: `<div>
                  <button @click="isVisible = false">销毁组件</button>
                  <p v-if="isVisible">Hello, Vue!</p>
               </div>`
});

生命周期总结

Vue 的生命周期钩子允许开发者在组件的不同生命阶段插入自定义逻辑。通过合理使用这些钩子,开发者可以:

  • 在组件被创建时进行初始化和设置。
  • 在挂载后进行 DOM 操作。
  • 在组件更新前后执行特定逻辑。
  • 在组件生命周期末尾清理资源和事件监听。

理解组件的生命周期,对于编写高效、可靠的 Vue 应用至关重要。通过结合生命周期钩子,我们能够确保各个阶段之间的逻辑衔接与数据的一致性。

生命周期钩子对比表

生命周期钩子 触发时机 说明
beforeCreate 实例初始化后 数据未初始化,事件和侦听器未配置
created 实例创建后 数据已就绪,可以访问属性和方法
beforeMount 挂载开始之前 render 函数首次调用前,DOM 还未生成
mounted 挂载完成后 DOM 对象已生成,可以进行 DOM 操作
beforeUpdate 数据更新前 可以读取现有状态,但下一轮 DOM 更新未开始
updated DOM 更新后 可以执行依赖于更新 DOM 结果的操作
beforeDestroy 实例销毁前 可以清理事件和其他外部资源
destroyed 实例销毁后 所有事件监听器被移除,完成收尾工作

参考链接

相关推荐
码哥DFS几秒前
Flex布局原理
前端·css·css3
小样还想跑17 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者18 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者18 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
Java水解26 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手1 小时前
js高级程序设计(日期)
javascript