Vue.js 的生命周期
Vue.js 的生命周期钩子函数是一组在 Vue 实例生命周期中执行的函数，它们允许你在特定阶段执行自定义逻辑。以下是 Vue.js 的生命周期钩子函数以及它们在生命周期中的执行时机：
1、beforeCreate:
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
不能访问 data 和 methods 中的数据和方法。
2、created:
在实例创建完成后被立即调用。
可以访问 data 和 methods。
通常用于数据初始化、异步操作等。
3、beforeMount:
在挂载开始之前被调用：相关的 render 函数首次被调用。
可以访问 el 属性，但挂载并未开始。
4、mounted:
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
可以访问 el。
通常用于 DOM 操作、发起网络请求等。
5、beforeUpdate:
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
可以在该钩子中对数据进行操作，但避免触发更新循环。
6、updated:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
可以访问更新后的 DOM。
通常用于操作更新后的 DOM，如调用第三方库、手动移动焦点等。
7、beforeDestroy:
实例销毁之前调用。在这一步，实例仍然完全可用。
可以在该钩子中进行清理操作，如清除定时器、取消订阅等。
8、destroyed:
实例销毁之后调用。此时，所有事件监听器都已被移除，所有子实例也已经被销毁。
通常用于清理无效的定时器、解绑全局事件等。
9、activated (仅适用于 keep-alive 组件):
被 keep-alive 缓存的组件激活时调用。
10、deactivated (仅适用于 keep-alive 组件):
被 keep-alive 缓存的组件停用时调用。
这些生命周期钩子函数提供了在不同阶段执行自定义逻辑的机会，使你能够更好地理解和控制 Vue 实例的行为。