Vue 2 和 Vue 3 中的钩子函数

Vue 钩子函数也被叫做生命周期钩子函数，它是 Vue 实例在其生命周期的不同阶段自动调用的函数。可以利用这些钩子函数在特定阶段执行自定义代码。

Vue 2 生命周期钩子函数

在 Vue 2 里，生命周期钩子函数可以在组件选项对象中定义。下面是一个简单的 Vue 2 组件示例，展示了各个生命周期钩子函数：

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例初始化之后，数据观测和 event/watcher 事件配置之前被调用');
  },
  created() {
    console.log('created: 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测、property 和 method 的计算、watch/event 事件回调的配置等');
  },
  beforeMount() {
    console.log('beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用');
  },
  mounted() {
    console.log('mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前');
  },
  updated() {
    console.log('updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用');
  },
  destroyed() {
    console.log('destroyed: 实例已经销毁之后调用。在这一步，所有的事件监听器和子实例都已经被销毁');
  },
  activated() {
    console.log('activated: 被 keep-alive 缓存的组件激活时调用');
  },
  deactivated() {
    console.log('deactivated: 被 keep-alive 缓存的组件停用时调用');
  },
  errorCaptured() {
    console.log('errorCaptured: 当捕获一个来自子孙组件的错误时被调用');
  }
});

Vue 3 生命周期钩子函数

Vue 3 采用了组合式 API，生命周期钩子函数需要通过 onXXX 函数来使用。以下是 Vue 3 中对应的生命周期钩子函数示例：

生命周期钩子函数总结

• 创建阶段：beforeCreate 和 created（Vue 2）、onBeforeMount（Vue 3）用于在实例初始化和挂载前执行操作，像数据初始化这类操作就适合在这一阶段进行。
• 挂载阶段：beforeMount 和 mounted（Vue 2）、onMounted（Vue 3）用于在组件挂载到 DOM 前后执行操作，比如操作 DOM 元素、发起网络请求等。
• 更新阶段：beforeUpdate 和 updated（Vue 2）、onBeforeUpdate 和 onUpdated（Vue 3）用于在数据更新前后执行操作，可用来处理数据更新时的副作用。
• 销毁阶段：beforeDestroy 和 destroyed（Vue 2）、onBeforeUnmount 和 onUnmounted（Vue 3）用于在组件销毁前后执行操作，像清理定时器、取消订阅等操作就适合在这一阶段进行。
• 特殊钩子：activated 和 deactivated（Vue 2 和 Vue 3）用于处理被 keep-alive 缓存的组件的激活和停用状态；errorCaptured（Vue 2 和 Vue 3）用于捕获子孙组件抛出的错误。

Vue 2 和 Vue 3 中的钩子函数在不同的生命周期阶段发挥着重要作用，下面为你详细介绍它们的具体应用场景。

Vue 2 钩子函数应用场景

1. beforeCreate 和 created

这两个钩子在实例初始化和数据观测完成后调用，常用于数据的初始化和异步请求。

new Vue({
    data() {
        return {
            userData: null
        };
    },
    beforeCreate() {
        // 可以做一些全局配置的初始化
        console.log('实例初始化，开始准备数据');
    },
    created() {
        // 发起异步请求获取用户数据
        fetch('https://api.example.com/user')
          .then(response => response.json())
          .then(data => {
                this.userData = data;
            });
    }
});

2. beforeMount 和 mounted

beforeMount 在挂载开始之前调用，mounted 在挂载完成后调用。mounted 常用于操作 DOM 元素和发起网络请求。

new Vue({
    template: '
{{ message }}
',
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    beforeMount() {
        console.log('DOM 挂载前');
    },
    mounted() {
        // 操作 DOM 元素
        const appElement = document.getElementById('app');
        appElement.style.color = 'red';

        // 发起网络请求
        fetch('https://api.example.com/data')
          .then(response => response.json())
          .then(data => {
                console.log(data);
            });
    }
});

3. beforeUpdate 和 updated

当数据更新时，beforeUpdate 在虚拟 DOM 打补丁之前调用，updated 在重新渲染和打补丁之后调用。常用于处理数据更新后的副作用。

new Vue({
    data() {
        return {
            count: 0
        };
    },
    beforeUpdate() {
        console.log('数据更新前，count:', this.count);
    },
    updated() {
        console.log('数据更新后，count:', this.count);
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

4. beforeDestroy 和 destroyed

beforeDestroy 在实例销毁之前调用，destroyed 在实例销毁之后调用。常用于清理定时器、取消订阅等操作。

new Vue({
    data() {
        return {
            timer: null
        };
    },
    created() {
        this.timer = setInterval(() => {
            console.log('定时器在运行');
        }, 1000);
    },
    beforeDestroy() {
        // 清理定时器
        clearInterval(this.timer);
        console.log('定时器已清理');
    },
    destroyed() {
        console.log('实例已销毁');
    }
});

5. activated 和 deactivated

这两个钩子用于处理被 keep-alive 缓存的组件的激活和停用状态。

<template>
    <div>
        <p>这是一个被 keep-alive 缓存的组件</p>
    </div>
</template>

<script>
export default {
    activated() {
        console.log('组件被激活');
    },
    deactivated() {
        console.log('组件被停用');
    }
};
</script>

6. errorCaptured

用于捕获子孙组件抛出的错误。

new Vue({
    errorCaptured(err, vm, info) {
        console.error('捕获到错误:', err);
        console.log('错误信息:', info);
        return false; // 阻止错误继续向上传播
    }
});

Vue 3 钩子函数应用场景

1. onBeforeMount 和 onMounted

2. onBeforeUpdate 和 onUpdated

3. onBeforeUnmount 和 onUnmounted

4. onActivated 和 onDeactivated

5. onErrorCaptured

这些钩子函数可以帮助你在组件的不同生命周期阶段执行特定的操作，从而更好地管理组件的状态和行为。