组合式 API：生命周期钩子
# onMounted()
-注册一个回调函数，在组件挂载完成后执行。 这个钩子在服务器端渲染期间不会被调用。
# onUpdated()
- 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
- 父组件的更新钩子将在其子组件的更新钩子之后调用。
- 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代
不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！
这个钩子在服务器端渲染期间不会被调用。
# onUnmounted()
- 注册一个回调函数，在组件实例被卸载之后调用。 一个组件在以下情况下被视为已卸载：
- 其所有子组件都已经被卸载。
- 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。 可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 这个钩子在服务器端渲染期间不会被调用。
# onBeforeMount()
注册一个钩子，在组件被挂载之前被调用。
- 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务器端渲染期间不会被调用。
# onBeforeUpdate()
注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
- 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
这个钩子在服务器端渲染期间不会被调用。
# onBeforeUnmount()
注册一个钩子，在组件实例被卸载之前调用。
- 当这个钩子被调用时，组件实例依然还保有全部的功能。
这个钩子在服务器端渲染期间不会被调用。
# KeepAlive 两个钩子
一. onActivated()
- 一个回调函数，若组件实例是 KeepAlive 缓存树的一部分，当组件被插入到 DOM 中时调用。 这个钩子在服务器端渲染期间不会被调用。
二. onDeactivated()
- 注册一个回调函数，若组件实例是 KeepAlive 缓存树的一部分，当组件从 DOM 中被移除时调用。 这个钩子在服务器端渲染期间不会被调用。