开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第23天，点击查看活动详情

前言

vue中组件的创建到销毁都有各自的阶段，每个阶段对应一个生命周期钩子函数，本节带大家了解这些函数。

生命周期

onBeforeMount:实例挂载前调用，此时DOM元素还没有开始渲染，所以在该周期内不能去操作DOM，如想操作需要用nextTick。生命周期钩子函数用法一样，用一个回调函数的参数写事件：

   const name = ref('tp 
   onBeforeMounted(() => {
      console.log(name.value);
    });

onMounted:实例挂载后调用，挂载后我们可以理解为DOM渲染完毕，在该回调中我们是可以操作DOM的。
onBeforeUpdate:实例更新前调用，可以访问更新的DOM做些操作。
onUpdated:实例更新后调用，如果是父子嵌套的组件，父组件会在子组件更新完再调用，并且不能再该函数中改变组件状态。
onBeforeUnmount:组件销毁前调用，在这个生命周期我们可以清除定时器、监听事件等副作用事件，以此来提升浏览器性能。
onUnmounted:组件销毁后调用，销毁意味着所有响应式作用停止，子组件也被卸载。
onActivated:打开组件缓存调用，该钩子针对于keepalive缓存而言的，keepalive能保持组件的状态，在离开组件时组件不会被销毁。
onDeactivated:离开缓存组件时候调用，离开缓存组件时，组件会变为不活跃状态，再次进入会被激活。
onErrorCaptured:捕获到错误时调用，用于调试的钩子函数，该错误可以来自于：
渲染组件、钩子函数、事件、监听器、自定义钩子函数等
该函数接受三个参数：错误对象、触发实例、来源类型。

   onErrorCaptured((err) => {
      console.log(err.message);
      return false;
    });

上面我们return了false，就是为了避免向上传递，组件链上存在多个该函数，那么错误会依次向上传递触发，这时候reture false就不会再继续向上。

生命周期时vue重要工具之类，各阶段的分化让我们开发更加明确与方便。