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 实例销毁后 所有事件监听器被移除,完成收尾工作

参考链接

相关推荐
喝拿铁写前端2 分钟前
智能系统的冰山结构
前端
z_mazin7 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线11 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
清风絮柳14 分钟前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨1 小时前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器1 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts1 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w1 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos