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

参考链接

相关推荐
Mr.Liu69 分钟前
小程序29-事件穿参-mark 自定义数据
前端·微信小程序·小程序
北极糊的狐14 分钟前
若依项目通用套路——列表页面提前加载数据塞进下拉框待选项
javascript·vue.js·elementui
Stuild Stuil34 分钟前
Mysql 字段值批量自增或自减(坐标系数据,(x,y))
java·javascript·mysql
水煮白菜王35 分钟前
首屏加载时间优化解决
前端·javascript·react.js
还是鼠鼠37 分钟前
Node.js 中间件-中间件的概念与格式
前端·javascript·vscode·node.js·express
Hamm1 小时前
为了减少维护成本,我们把AirPower4T拆成了一个个NPM包
前端·vue.js·typescript
路光.1 小时前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
唔661 小时前
flutter 曲线学习 使用第三方插件实现左右滑动
javascript·学习·flutter
xiezhuangshunv1 小时前
20250401-vue-声明触发的事件
前端·javascript·vue.js
PBitW2 小时前
微信小程序 -- 原生封装table
前端·微信小程序