VUE生命周期

目录

     一、生命周期四个阶段

     二、生命周期八个钩子函数

———————————————————————————————————————————

一、生命周期四个阶段

第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroy

二、生命周期八个钩子函数

1.beforeCreate

beforeCreate 钩子函数在 Vue 实例被创建之后，但在数据观测 (data observer) 和事件/watcher 事件被设置之前调用。这是在实例初始化之后的第一个生命周期钩子，此时无法访问到 data 和 methods 中的数据和方法。

2.created

created 钩子函数在 Vue 实例被创建完成后调用。此时，Vue 实例已经完成了数据观测 (data observer) 和事件/watcher 事件的初始化。可以在这个阶段进行数据的初始化操作。

3.beforeMount

beforeMount 钩子函数在 Vue 实例挂载到 DOM 之前调用。此时，相关的 render 函数首次被调用，但尚未生成真正的 DOM 元素。

4.mounted

mounted 钩子函数在 Vue 实例挂载到 DOM 后调用。此时，Vue 实例已经完成了初始化，可以访问 DOM 元素，并执行一些需要使用到 DOM 的操作，比如设置定时器、获取 DOM 元素尺寸等。

5.beforeUpdate

beforeUpdate 钩子函数在 Vue 实例数据更新时调用，但是在虚拟 DOM 重新渲染和打补丁之前调用。此时，组件的数据已经更新，但尚未更新到 DOM 上。

6.updated

updated 钩子函数在 Vue 实例数据更新并且虚拟 DOM 重新渲染和打补丁完成后调用。此时，组件的状态已经更新到 DOM 上，可以执行与 DOM 相关的操作。

7.beforeDestroy

beforeDestroy 钩子函数在 Vue 实例销毁之前调用。此时，Vue 实例仍然完全可用，可以执行一些清理工作，比如清除定时器、取消订阅等。

8.destroy

destroyed 钩子函数在 Vue 实例销毁后调用。在这个阶段，Vue 实例的所有指令和事件监听器都已被移除，组件也不再绑定数据和 DOM。

示例代码 

让我们通过一个简单的示例来演示Vue生命周期的使用：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate hook triggered');
  },
  created() {
    console.log('created hook triggered');
  },
  beforeMount() {
    console.log('beforeMount hook triggered');
  },
  mounted() {
    console.log('mounted hook triggered');
  },
  beforeUpdate() {
    console.log('beforeUpdate hook triggered');
  },
  updated() {
    console.log('updated hook triggered');
  },
  beforeDestroy() {
    console.log('beforeDestroy hook triggered');
  },
  destroyed() {
    console.log('destroyed hook triggered');
  }
}
</script>