生命周期

this上下文

自动指向当前调用它的组件实例。

避免用箭头函数来定义生命周期，否则无法通过this获取组件实例

API

所有API都在setup()之后调用

beforeCreate

组件实例初始化完成后立即调用，props解析后

created

此时已完成：响应式数据、计算属性、方法、侦听器
$el属性不可用

beforeMount

在组件被挂载之前，即将首次执行DOM渲染过程

mounted

挂载之后调用

组件在以下情况视为已挂载：

• 所有同步子组件已经被挂载
• 其自身的DOM树已经创建完成并插入了父容器中

通常用于执行需要访问组件所渲染的DOM树相关的副作用

😩 服务端渲染时不会被调用

beforeUpdate

在组件，响应式状态变更，更新其DOM树之前调用
在Vue更新DOM之前访问DOM状态。

😩 服务端渲染时不会被调用

updated

响应式变更，更新其DOM树之后调用

• 父组件的updated在其子组件的updated之后调用
• 在组件的任意DOM更新后调用
• 和nextTick的关系？

❗ 都是数据修改后，可以获取新数据。nextTick在渲染前，updated在渲染后

beforeUnmount

在一个组件实例被卸载之前调用
当被调用时，组件实例依然还保有全部的功能

unmounted

在一个组件实例被卸载之后调用
以下情况被视为已卸载：

• 其所有子组件都已经被卸载
• 所有相关的响应式作用（计算属性，侦听器）都已经停止

可以在本钩子，手动清理一些副作用，例如计时器、DOM事件监听器，与服务器的连接

errorCaptured

在捕获了后代组件传递的错误时调用

错误捕获来源：

• 组件渲染
• 事件处理器
• 生命周期钩子
• setup()函数
• 侦听器
• 自定义指令钩子
• 过度钩子

三个参数：

• 错误对象
• 触发该错误的组件实例
• 说明错误来源类型的信息字符串