【vue3】11.跟着官网学习vue3-生命周期钩子，onErrorCaptured错误捕获钩子的使用

每日鸡汤：努力，现在可能觉得不过如此，混一天和努力一天看不出任何差别，三天两天也看不到任何变化，十天半个月也体现不出任何差距，但是两三个月后你就会看到气场不同。

目录

前言

一、基本概念

1. 生命周期

2. 钩子

二、注意事项总结

1.onUnmounted

2.onErrorCaptured之组件渲染

总结

---

前言

本篇文章对应官网【生命周期钩子】

---

一、基本概念

1. 生命周期

这段是废话，可以忽略

什么是生命周期？就像人一样生老病死，我们的一生就是一个周期，一个轮回，每个人都一样，出生-长大-死亡。

我们把组件当成一个人，它也有它一生必须经过的时间节点，就是组件的生命周期。

2. 钩子

这段也是废话，可以忽略

钩子就是一个函数，其实我一直不理解，为啥好好的函数要起一个这个诡异的名字。没办法我们只能试图理解它。看一下这篇文章，可以理解一下，钩子就是一个事件监听函数。

hook函数教程（一）什么是钩子 - 宇月--测试开发梦想家 - 博客园一、什么是钩子 我们可以首先从字面上了解钩子，钩子是干什么的呢？日常生活中，我们的钩子是用来钩住某种东西的，比如，说，鱼钩是用来钓鱼的，一旦鱼咬了钩，钩子就一直钩住鱼了，任凭鱼在水里怎么游，也逃不出鱼https://www.cnblogs.com/xwj-pandababy/articles/3464604.html关于各种生命周期的顺序啥的，官网已经很详细了，请仔细研读

二、注意事项总结

可以同时看一下 组合式API: 生命周期钩子

1.onUnmounted

这里面做的都是销毁操作，尤其是事件监听的销毁操作尤其重要，要不然监听函数会被反复的调用。

2.onErrorCaptured之组件渲染

这个没用过，所以很有必要自己动手试一下

捕获组件的渲染报错，需要在父组件里面监听onErrorCaptured方法

<template>{
    
    {{test.name}}
    <a-input v-model:value="inputValue" />
template>
<script lang="ts" setup>
import { Input as AInput } from 'ant-design-vue';
import { computed, defineEmits, defineProps } from 'vue';
const props = defineProps({
  value: String,
});
const emits = defineEmits(['update:value']);
 
const inputValue = computed({
    get() {
        return props.value || ''
    },
    set(v: string) {
        emits('update:value', v)
    }
})
script>

<template>
  当前的值：{{name}}
  <o-input v-model:value="name">o-input>
template>
<script lang="ts" setup>
import { onErrorCaptured, ref } from 'vue';
import OInput from './component/OInput.vue';
 
const name = ref('init value')
 
// 父组件监听方法
// 注册一个钩子，在捕获了后代组件传递的错误时调用。 注意是后代组件中有错误
onErrorCaptured((err) => {
    console.log('打印onErrorCaptured错误', err)
})
script>
<style>
#app {
 
}
style>

错误传递规则，再在main.js中定一个应用级错误处理函数

import { createApp } from 'vue';
import App from './App.vue';
import { Input } from 'ant-design-vue';
import './assets/main.css';
 
const app = createApp(App);
 
app.config.errorHandler = (err) => {
  console.log('应用级错误', err);
};
 
app.use(Input);
app.mount('#app');

这个时候打印的错误就如下，注意，这个时候，被应用级错误捕获函数捕获后，app.vue就不会抛出错误了。

 再来试一下阻止错误向上传递吧

---

总结

官网那个关于生命周期的图，请有感情的朗读并背诵下来。