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

参考链接

相关推荐
Json20113153 分钟前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego
前端Hardy7 分钟前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
阿里云云原生8 分钟前
仅3步!即刻拥有 QwQ-32B,性能比肩全球最强开源模型
前端·云原生
前端Hardy14 分钟前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy15 分钟前
HTML&CSS:不一样的开关效果
javascript·css·html
清灵xmf34 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己36 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
web_Hsir38 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
-代号95271 小时前
【JavaScript】十三、事件监听与事件类型
开发语言·javascript·ecmascript
阳树阳树2 小时前
signal-新的状态管理模式
前端·javascript