vue生命周期钩子函数

一.生命周期阶段

vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroyed

二.生命周期函数

1.beforecreated（）

介绍：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项对象还未被创建，el 和 data 都为 undefined，无法访问到数据和 DOM。

示例：

<script>  
export default {  
  beforeCreate() {  
    // 很少在此阶段进行操作，因为组件实例尚未完全创建  
    console.log('beforeCreate 钩子被调用');  
  },  
  // ...  
}  
</script>

2.created（）

介绍：实例创建完成后立即调用，此时实例已经完成以下配置：数据观测、属性和方法的运算、watch/event事件回调，挂载阶段还没开始。

示例：

created() {
  console.log('created: 实例创建完成');
}

3.beforeMount

介绍：在挂载开始之前被调用：相关的 render 函数首次被调用。在挂载之前执行一些操作，例如修改 DOM 结构等。

示例：

beforeMount() {
  console.log('beforeMount: 挂载开始之前');
}

4.mounted

介绍：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。可以在这个阶段操作 DOM，执行与 DOM 相关的逻辑。

示例：

mounted() {
  console.log('mounted: 实例已挂载');
}

5.beforeUpdate

介绍：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。​​​​​​可以在这个阶段对更新之前的状态进行访问。

示例：

beforeUpdate() {
  console.log('beforeUpdate: 数据更新之前');
}

6.updated

介绍：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。可以在这个阶段操作 DOM，但避免在此期间更改数据，因为可能导致无限循环更新。

示例：

updated() {
  console.log('updated: 数据更新完成');
}

7.beforeUnmount（Vue 3）

介绍：实例卸载之前调用。在实例被卸载之前进行一些清理操作，例如取消事件监听等。

示例：

beforeUnmount() {
  console.log('beforeUnmount: 实例卸载之前');
}

8.unmounted（Vue 3）

介绍：实例被卸载之后调用。 在实例被卸载之后进行一些清理操作，例如销毁定时器等。

示例：

unmounted() {
  console.log('unmounted: 实例已卸载');
}