Vue生命周期总结（四个阶段，八个钩子函数）

Vue.js 的生命周期可以概括为四个阶段的八个事件钩子，分别是创建前/后、载入前/后、更新前/后、销毁前/后。

1. 创建前/后：beforeCreate 和 created
2. 载入前/后：beforeMount 和 mounted
3. 更新前/后：beforeUpdate 和 updated
4. 销毁前/后：beforeDestroy 和 destroyed

下面是一个简单的例子，展示了这些生命周期钩子的用法：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate: 实例完全被创建出来之前。')
  },
  created() {
    console.log('created: 实例创建完成，属性已经绑定，但DOM还未生成和挂载。')
  },
  beforeMount() {
    console.log('beforeMount: 模板已经在内存中编译完成，但还没被挂载到DOM上。')
  },
  mounted() {
    console.log('mounted: 模板已经被挂载到DOM上，此时可以进行DOM相关的操作。')
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新时调用，可以在此进行数据更新前的操作。')
  },
  updated() {
    console.log('updated: 数据更新完成后调用，此时DOM已经更新完成。')
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前调用。')
  },
  destroyed() {
    console.log('destroyed: Vue实例销毁后调用。')
  }
}
</script>

当你运行这个Vue实例时，会依次打印出对应的生命周期钩子信息。