vue生命周期前后都做了哪些事情？

**Vue 生命周期概述**

在 Vue 的应用中，组件的生命周期是指从创建到销毁之间的一系列事件。这些事件可以帮助我们理解组件的状态变化，并且提供了一个机会来执行一些特定的操作。

在本文中，我们将详细介绍 Vue 组件的生命周期前后都做了哪些事情，包括各个阶段的事件和示例代码。

**1. beforeCreate()**

`beforeCreate()` 是组件创建之前调用的第一个方法。这个阶段，组件的实例还没有被创建，所有的属性和方法都还没有被初始化。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 beforeCreate() {
 console.log('beforeCreate:', this.name); // undefined }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，但所有的属性和方法都还没有被初始化。

**2. created()**

`created()` 是组件创建之后调用的第二个方法。这个阶段，组件的实例已经被创建了，所有的属性和方法都已经被初始化。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 created() {
 console.log('created:', this.name); // John }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，所有的属性和方法都已经被初始化。

**3. beforeMount()**

`beforeMount()` 是组件挂载之前调用的第三个方法。这个阶段，组件的模板还没有被渲染到 DOM 中。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 beforeMount() {
 console.log('beforeMount:', this.$el); // null }
}

在这个阶段，我们可以通过 `this.$el` 来访问组件的 DOM 元素，但它还没有被渲染到 DOM 中。

**4. mounted()**

`mounted()` 是组件挂载之后调用的第四个方法。这个阶段，组件的模板已经被渲染到 DOM 中。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 mounted() {
 console.log('mounted:', this.$el); // HTMLElement }
}

在这个阶段，我们可以通过 `this.$el` 来访问组件的 DOM 元素，它已经被渲染到 DOM 中。

**5. beforeUpdate()**

`beforeUpdate()` 是组件更新之前调用的第五个方法。这个阶段，组件的数据正在被更新，但模板还没有被重新渲染。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 beforeUpdate() {
 console.log('beforeUpdate:', this.name); // John }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，但模板还没有被重新渲染。

**6. updated()**

`updated()` 是组件更新之后调用的第六个方法。这个阶段，组件的数据已经被更新，模板也已经被重新渲染。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 updated() {
 console.log('updated:', this.name); // John }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，模板也已经被重新渲染。

**7. beforeDestroy()**

`beforeDestroy()` 是组件销毁之前调用的第七个方法。这个阶段，组件的实例还没有被销毁，但所有的属性和方法都已经被清除。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 beforeDestroy() {
 console.log('beforeDestroy:', this.name); // John }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，但所有的属性和方法都已经被清除。

**8. destroyed()**

`destroyed()` 是组件销毁之后调用的第八个方法。这个阶段，组件的实例已经被销毁了。

javascript// 组件定义export default {
 data() {
 return {
 name: 'John'
 }
 },
 destroyed() {
 console.log('destroyed:', this.name); // undefined }
}

在这个阶段，我们可以通过 `this` 来访问组件的实例，但它已经被销毁了。

综上所述，Vue 组件的生命周期前后都做了哪些事情包括：

* beforeCreate(): 组件创建之前调用的第一个方法。
* created(): 组件创建之后调用的第二个方法。
* beforeMount(): 组件挂载之前调用的第三个方法。
* mounted(): 组件挂载之后调用的第四个方法。
* beforeUpdate(): 组件更新之前调用的第五个方法。
* updated(): 组件更新之后调用的第六个方法。
* beforeDestroy(): 组件销毁之前调用的第七个方法。
* destroyed(): 组件销毁之后调用的第八个方法。

这些事件可以帮助我们理解组件的状态变化，并且提供了一个机会来执行一些特定的操作。