第VI章-Ⅰ Vue3生命周期探讨

简介
Vue3生命周期概览
生命周期钩子在选项式 API 中的使用
- 错误捕获钩子 onErrorCaptured
生命周期钩子在组合式 API 中的使用
- 错误捕获钩子 onErrorCaptured
总结

简介

在 Vue 3 中，生命周期钩子定义了组件在其创建、挂载、更新和销毁等过程中会执行的操作。这些钩子允许开发者在组件不同的阶段执行特定的代码逻辑。以下是 Vue 3 生命周期钩子的详细解释，以及如何在选项式 API 和组合式 API 中分别使用它们。

Vue3生命周期概览

beforeCreate：实例初始化之后，数据观测和事件配置之前。
created：实例创建完成，已经配置好数据观测、计算属性和方法，但尚未挂载 DOM。
beforeMount：在挂载之前被调用，在 render 函数首次被调用之前。
mounted：实例挂载完成，DOM 已经可访问。
beforeUpdate：在数据更新导致虚拟 DOM 重新渲染前被调用。
updated：数据更新导致虚拟 DOM 更新并重新渲染完成后调用。
beforeUnmount：实例被卸载之前调用。
unmounted：实例被卸载之后调用。
errorCaptured：当捕获一个来自子组件的错误时调用。

生命周期钩子在选项式 API 中的使用

选项式 API 中，生命周期钩子直接在组件对象上定义。

<template><div><h2>选项 API</h2><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue 3!'};},beforeCreate() {console.log('beforeCreate: 实例初始化之后');},created() {console.log('created: 实例创建完成');},beforeMount() {console.log('beforeMount: 挂载之前');},mounted() {console.log('mounted: 挂载完成');},beforeUpdate() {console.log('beforeUpdate: 更新之前');},updated() {console.log('updated: 更新完成');},beforeUnmount() {console.log('beforeUnmount: 卸载之前');},unmounted() {console.log('unmounted: 卸载完成');},methods: {updateMessage() {this.message = 'Message Updated!';}}
};
</script>

错误捕获钩子 onErrorCaptured

<template><div><h2>选项 API 错误捕获</h2><p v-if="errorMessage">{{ errorMessage }}</p><button @click="throwError">Throw Error</button></div>
</template><script>
export default {data() {return {errorMessage: ''};},methods: {throwError() {throw new Error('Test Error from Button');}},errorCaptured(err, instance, info) {this.errorMessage = `Error: ${err.message}`;console.log('Captured error:', err, 'In instance:', instance, 'Info:', info);return false; // 返回 false 会继续传播这个错误}
};
</script>

生命周期钩子在组合式 API 中的使用

组合式 API 中，生命周期钩子作为 Vue 中的导入函数，在 setup 函数中调用。

<template><div><h2>组合 API</h2><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';// 数据
const message = ref('Hello, Vue 3!');// 更新函数
const updateMessage = () => {message.value = 'Message Updated!';
};// 生命周期钩子
onBeforeMount(() => {console.log('onBeforeMount: 挂载之前');
});onMounted(() => {console.log('onMounted: 挂载完成');
});onBeforeUpdate(() => {console.log('onBeforeUpdate: 更新之前');
});onUpdated(() => {console.log('onUpdated: 更新完成');
});onBeforeUnmount(() => {console.log('onBeforeUnmount: 卸载之前');
});onUnmounted(() => {console.log('onUnmounted: 卸载完成');
});
</script>

错误捕获钩子 onErrorCaptured

import { ref, onMounted, onErrorCaptured } from 'vue';const errorMessage = ref('');onMounted(() => {// 模拟产生错误throw new Error('Test Error');
});onErrorCaptured((err, instance, info) => {errorMessage.value = `Error: ${err.message}`;console.log('Captured error:', err, 'In instance:', instance, 'Info:', info);return false; // 返回 false 会继续传播这个错误
});