详解 Vue 的各个生命周期

Vue 组件的生命周期

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

1.1 创建阶段

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

• beforeCreate：在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。
• created：在实例被创建后调用。此时实例已被完全设置，包括数据观测和属性初始化。

示例：

new Vue({
    data() {
        return {
            message: 'Hello, Vue!'
        }
    },
    beforeCreate() {
        console.log('beforeCreate: 实例刚被创建，数据未初始化');
    },
    created() {
        console.log('created: 实例已创建，数据准备就绪:', this.message);
    }
});

1.2 挂载阶段

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

• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
• mounted：在挂载完成后被调用，此时组件的 DOM 结构已被渲染并且可以访问。

示例：

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 更新完成后被调用。

示例：

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：在实例被销毁后调用，所有的事件监听器将被移除。

示例：

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 应用至关重要。通过结合生命周期钩子，我们能够确保各个阶段之间的逻辑衔接与数据的一致性。

生命周期钩子对比表

参考链接

• Vue.js 官方文档
• Vue.js 生命周期