前言
vue中生命周期该如何理解呢？就是某个组件从创建到销毁的几个阶段，在这个几个阶段你可以干什么，怎么干，都由开发者决定。vue提供了八个阶段的生命周期，虽然看似很多，但是一些基本不会用到，下面就看一下什么生命周期吧！
先看一下官方给的示例图（vue2）：
初始化阶段
这个阶段有两个生命周期钩子，beforeCreate和created，在这个阶段做了哪些事呢？
在vue组件的生命周期中，beforeCreated到created阶段执行了一系列的操作:
beforeCreated(创建前)阶段是Vue实例刚被创建出来，但是尚未完成初始化，此时实例上的属性、方法还未被创建和挂载。- 在
beforeCreated阶段中，可以进行一些初始化操作，比如全局事件的监听、获取初始化数据等。 - 在
created(创建后)阶段，Vue实例的初始化已经完成，实例上的属性、方法已经被创建并且已经执行了数据观测（响应式），但是此时尚未挂载到DOM元素上。 - 在
created阶段中，可以进行一些初始化数据的获取和处理、异步请求、组件的初始渲染等操作。
js
<template>
<div>
<button>{{ name }}</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
};
},
beforeCreate() {
/* 在这里基本什么操作都做不了，因为vue实例还未挂载，但凡涉及到vue实例的操作都无法执行
所以这个生命周期一般都不会用*/
this.name = "iceCode"; //在这里赋值是没有任何效果的，也不会报错
},
created() {
/* 在这就可以访问到vue实例上的响应数据，即data,props等一些响应数据 */
this.name = "iceCode"; //在这里赋值 按钮的名字 为iceCode
},
};
</script>挂载阶段
这个阶段有两个生命周期钩子，beforeMount和mounted ，在这个阶段做了哪些事呢？
在beforeMount到mounted期间，当前组件进行了一系列的初始化操作和DOM挂载。具体来说，以下是该期间内发生的一些重要事件和操作：
-
beforeMount阶段：- 组件实例已经初始化，可以访问各种数据，包括响应式数据和props等。
- 可以使用各种Vue内置的指令，如v-if、v-for等。
- 可以使用组件的实例方法，如methods中定义的方法。
-
mounted阶段：- 组件的el已经被新创建的vm.$el替换，但是尚未插入到文档中。
- 可以访问子组件，进行父子组件之间的通信等操作。
- 可以对DOM进行操作，例如添加事件监听器、修改样式等。
- 可以执行异步操作，如发送网络请求等。
js
<template>
<div>
<button ref="button">{{ name }}</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "iceCode",
};
},
beforeMount() {
/* 这里是获取不到dom元素的，在这里dom操作是不会生效的
跟在created里的效果类似，既然这样 大多情况下都会使用created不会使用这个中钩子
*/
const { button } = this.$refs
button.style.color='red'
},
mounted() {
/* 在这里dom已经挂载好了，已经可以访问到dom元素了，所以在这里对dom进行操作是可以生效的 */
const { button } = this.$refs
button.style.color='red'//赋值之后 button里的字就成了红色
}
};
</script>更新阶段
这个阶段依旧有两个钩子，beforeUpdate和updated ,在这个阶段主要做了哪些？
在 Vue.js 中，beforeUpdate 和 updated 是 Vue 组件的生命周期钩子函数，它们在组件的更新过程中扮演着重要的角色。
beforeUpdate：在组件的数据更新之前触发，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。在这个生命周期钩子中，你可以执行一些准备工作，比如更新组件的状态、获取新的数据等。注意，在这个阶段，组件的 DOM 还未更新，因此无法访问更新后的 DOM。updated：在组件的数据更新之后触发，发生在虚拟 DOM 重新渲染和打补丁之后。在这个生命周期钩子中，你可以执行一些清理工作，比如移除不再需要的事件监听器、停止播放动画等。此外，在这个阶段，组件的 DOM 已经更新完成，你可以访问更新后的 DOM。
js
<template>
<div>
<button ref="button" @click="btn">{{ name }}</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "iceCode",
};
},
methods: {
btn() {
this.name = "new_iceCode";
this.$refs.button.style.height = "60px";
},
},
//在这个两个钩子里 所有的打印结果是一个样的，虽然说在beforeUpdate中dom还没更新
//但是因为vue双向绑定的原理，数据驱动视图改变，当数据跟新的时候，dom也跟着同步跟新了
//所以在这两个生命周期里的所打印的效果是相同的
beforeUpdate() {
const { button } = this.$refs;
const h = getComputedStyle(button, null)["height"];
console.log(button, h);
},
updated() {
const { button } = this.$refs;
const h = getComputedStyle(button, null)["height"];
console.log(button, h);
},
};
</script>注意
在beforeUpedate和updated这两个钩子中所有的打印结果是一个样的，虽然说在beforeUpdate中dom还没更新，但是因为vue双向绑定的原理，数据驱动视图改变，当数据更新的时候，dom也跟着同步更新了，所以在这两个生命周期里的所打印的效果是相同的
卸载阶段
这个阶段也有两个钩子，beforeDestory和destoryed ，这两个钩子中都做了什么 beforeDestroy和destroyed是Vue组件的生命周期钩子，它们在组件被销毁的阶段中分别执行不同的任务。
beforeDestroy：这个钩子在Vue组件销毁之前被调用，也就是说在这个阶段，组件实例中所有的方法和数据都仍然处于可用状态。这个阶段适合进行一些清理工作，比如手动移除已经添加的事件监听器。destroyed：这个钩子在Vue组件销毁之后被调用，在这个阶段，组件中的所有方法和数据已经被完全销毁，实例已经不存在了。这个阶段可以用于执行一些后续的清理工作，比如清理实例连接，解绑它的全部指令及事件监听器。
js
beforeDestory() {
//在这里可以进行自定义事件的清除，或者定时器的清除等工作
//因为即使组件销毁的了，自定义的事件依旧存在，如果不及时清理，会造成内存泄漏
},
destoryed() {
//在这里基本上什么都没有了，这个钩子很少用到
}当有父子组件时，生命周期的执行顺序
正常情况下，我们都知道生命周期的执行顺序是从上而下执行，那么当一个组件里包含着一个子组件的时候，那么他们的生命周期是怎么执行的呢
在组件创建和挂载阶段：
父组件的beforeCreate、created和beforeMount钩子函数会先执行，然后是子组件的beforeCreate、created、beforeMount和mounted钩子函数，最后是父组件的mounted钩子函数。
在组件更新阶段： 父组件的beforeUpdate钩子函数会先执行，然后是子组件的beforeUpdate钩子函数。
子组件的updated钩子函数会执行，然后是父组件的updated钩子函数。
在组销毁阶段：
父组件的beforeDestroy钩子函数会先执行，然后是子组件的beforeDestroy钩子函数。
子组件的destroyed钩子函数会执行，然后是父组件的destroyed钩子函数。
结尾
生命周期钩子在vue中有着举足轻重的作用，Vue实例在创建、更新、销毁过程中分别会经历的一系列阶段，它对于了解Vue的工作机制至关重要。 Vue的生命周期允许我们更好地了解和控制Vue实例从创建到销毁的整个过程，可以在各个阶段进行相应的操作，更好地调试和改进代码。