vue有哪些生命周期？以及每个生命周期做了些什么？

Vue.js 有一系列的生命周期钩子，这些钩子提供了在组件实例的不同阶段执行代码的机会。以下是 Vue.js 组件的主要生命周期钩子及其作用：

生命周期钩子概述

1. beforeCreate: 在实例初始化之后、数据观测(data observer) 和事件配置(event setup) 之前被调用。
2. created: 实例已经创建完成之后被调用。在这一步，实例已完成数据观测、属性和方法的运算，然而挂载阶段还没开始，$el属性还不存在。
3. beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted: el 被新创建的 vm.$el 替换，并挂载到实例上之后调用该钩子。
5. beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
7. beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

详细介绍

1. beforeCreate
   - 执行时间：在实例初始化之后，数据观测和事件配置之前。
   - 典型用途：可以在这里初始化非响应式属性或执行一些准备工作，但不能访问 data 和 methods。

   javascript    beforeCreate() {      console.log('beforeCreate');    }    

2. created
   - 执行时间：实例已经创建完成后，此时可以访问 data、methods、computed 等。
   - 典型用途：可以进行数据的初始化，发起网络请求等。

   javascript    created() {      console.log('created');      // 可以在这里发起 AJAX 请求初始化数据    }    

3. beforeMount
   - 执行时间：在挂载开始之前，相关的 render 函数首次被调用。
   - 典型用途：可以在这里操作 DOM，设置一些特定的状态等。

   javascript    beforeMount() {      console.log('beforeMount');    }    

4. mounted
   - 执行时间：el 被新创建的 vm.$el 替换，并挂载到实例上之后。
   - 典型用途：进行 DOM 操作，启动第三方库等。

   javascript    mounted() {      console.log('mounted');      // 可以在这里操作 DOM    }    

5. beforeUpdate
   - 执行时间：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   - 典型用途：在数据更新之前做一些处理，比如更新日志等。

   javascript    beforeUpdate() {      console.log('beforeUpdate');    }    

6. updated
   - 执行时间：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后。
   - 典型用途：在 DOM 更新后执行一些操作。

   javascript    updated() {      console.log('updated');    }    

7. beforeDestroy
   - 执行时间：实例销毁之前调用。
   - 典型用途：在实例销毁之前进行清理工作，比如清除计时器，取消网络请求等。

   javascript    beforeDestroy() {      console.log('beforeDestroy');    }    

8. destroyed
   - 执行时间：Vue 实例销毁后调用。
   - 典型用途：清理 DOM 和事件监听器，销毁子组件等。

   javascript    destroyed() {      console.log('destroyed');    }