vue2 生命周期

vue2 生命周期

Vue 2 的生命周期指的是 Vue 实例从创建、挂载到页面、数据更新、销毁的整个过程。在这个过程中，Vue 提供了一系列的钩子函数，允许开发者在特定的时间点插入自己的代码逻辑，从而实现对组件的精确控制。

1. 官方图示

vue2官方地址

2. 生命周期阶段及钩子函数

⭐️表示常用

2.1 创建阶段

在这个阶段，Vue 实例正在被创建，主要进行数据观测、property 和 method 的计算、watch/event 事件回调的配置等工作。

• beforeCreate
  • 触发时间: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • 使用场景: 此时 data 和 methods 还未初始化，通常在此阶段进行一些与实例创建无关的全局配置或初始化操作，如加载外部库等。

new Vue({
   
   
    beforeCreate() {
   
   
        console.log('实例初始化，data 和 methods 未可用');
    }
});

• created⭐️
  • 触发时间: 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测 (data observer)、property 和 method 的计算、watch/event 事件回调的配置等。然而，挂载阶段还没有开始，$el 属性目前不可用。
  • **使用场景:**可以在这个阶段进行数据的初始化操作，如发起网络请求获取初始数据。

new Vue({
   
   
    data() {
   
   
        return {
   
   
            userData: null
        };
    },
    created() {
   
   
        // 模拟异步请求
        fetch('https://api.example.com/user')
          .then(response => response.json())
          .then(data => {
   
   
                this.userData = data;
            });
    }
});

2.2 挂载阶段

这个阶段主要涉及到将 Vue 实例挂载到 DOM 上。

• beforeMount
  • 触发时间: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时模板已经编译完成，但还未挂载到页面上。
  • 使用场景: 可以在这个阶段对模板进行一些最后的修改或处理。

new Vue({
   
   
    template: '<div>{
   
   { message }}</div>',
    data() {
   
   
        return {
   
   
            message: 'Hello'
        };
    },
    beforeMount() {
   
   
        console.log('模板编译完成，即将挂载到页面');
    }
});

• mounted⭐️
  • 触发时间: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。此时模板已经成功挂载到页面上，可以访问 DOM 元素。
  • 使用场景: 可以在这个阶段对模板进行一些最后的修改或处理。

new Vue({
   
   
    template: '<div id="app">{
   
   { message }}</div>',
    data() {
   
   
        return {
   
   
            message: 'Hello'
        };
    },
    mounted() {
   
   
        const appElement = document.getElementById('app');
        console.log('DOM 已挂载:', appElement.textContent);
    }
});

2.3 更新阶段

当响应式数据发生变化时，会触发更新阶段。

• beforeUpdate
  • 触发时间: 在数据更新之前被调用，发生在虚拟 DOM 打补丁之前。此时数据已经发生变化，但 DOM 还未更新。
  • 使用场景: 可以在这个阶段获取数据更新前的 DOM 状态，进行一些数据备份或其他操作。

new Vue({
   
   
    data() {
   
   
        return {
   
   
            count: 0
        };
    },
    beforeUpdate() {
   
   
        console.log('数据即将更新，当前 count:', this.count);
    },
    methods