一、Vue 实例的生命周期钩子

开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载

调用顺序：

beforeCreate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。适合在这个钩子中更改状态，但不会触发重渲染。

created：实例已经创建完成。此时可以访问 reactive 的数据和事件。但挂载阶段还未开始，$el 还没有被创建。

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。可以通过 DOM API 操作 el。

beforeUpdate（当数据更新时）：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。适合在这个钩子中更改状态，但不会触发重渲染。

updated（当数据更新完成时）：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新。可以执行依赖于 DOM 的操作。

beforeDestroy（当实例销毁时）：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed（实例销毁后）：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有事件监听器会被移除，所有子实例也会被销毁。

实际使用场景

• beforeCreate 和 created：通常用于初始化数据和进行全局设置，例如注册全局事件。
• beforeMount 和 mounted：常用于在组件挂载到 DOM 之前和之后执行某些操作，例如获取数据、操作 DOM 元素等。
• beforeUpdate 和 updated：用于在数据更新时执行一些操作，例如日志记录、执行某些计算等。
• beforeDestroy 和 destroyed：用于在实例销毁时执行清理操作，例如取消定时器、移除事件监听等。

生命周期钩子的顺序

用开饭店来解释一下

<template>
  <div>{
  { message }}