VUE的8个生命周期
在Vue.js中，生命周期是Vue组件从创建到销毁的一系列钩子函数，允许开发者在这些特定阶段执行代码。这些生命周期钩子提供了对组件状态变化的直接访问，使得开发者可以在组件的不同阶段执行特定的操作，如数据获取、DOM渲染、组件更新等。
Vue 2.x 和 Vue 3.x 的生命周期钩子有所不同，但基本的理念是一致的。这里我们主要介绍Vue 2.x的常见生命周期钩子，因为Vue 3.x在大多数情况下使用了相同的命名和概念，但引入了Composition API，这可能会影响一些生命周期的使用方式。
Vue 2.x 生命周期钩子
beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用，此时已完成数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段(DOM 挂载)前的 data.property 和 methods 中的 methods 无法访问。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在生成的 HTML 挂载到页面之前被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时，代表已经进入了可交互阶段。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用此钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此阶段更改状态，因为这可能会导致更新无限循环。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
Vue 3.x Composition API
虽然Vue 3.x引入了Composition API来替代Options API，但它并没有改变生命周期的概念或名称。Vue 3.x的生命周期钩子仍然是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount（代替beforeDestroy）、unmounted（代替destroyed）。
使用Composition API时，你可以通过onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等函数来访问这些生命周期钩子，它们是响应式引用的一部分，允许你在setup函数中直接使用它们。例如：
let app = new Vue({el: "#app",data: {message: '提示消息',},beforeCreate() {console.log("创建之前", this.message);},created() {console.log("创建完毕", this.message);},beforeMount() {console.log("挂载之前");},mounted() {console.log("挂载完毕", this.$el);},beforeUpdate() {console.log("更新之前");},updated() {console.log("更新完毕");},beforeDestroy() {console.log("销毁之前");},destroyed() {console.log("销毁完毕");}});通过使用这些生命周期钩子，你可以精确控制组件在各个阶段的执行逻辑，从而更好地管理组件的行为和状态。