vue 钩子函数

// Vue 钩子函数示例

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  // beforeCreate 钩子在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  beforeCreate() {
    console.log('beforeCreate: 实例刚刚被创建，data 和 methods 还未初始化');
  },
  // created 钩子在实例创建完成后被调用。此时完成了数据观测等，但尚未挂载到 DOM 上。
  created() {
    console.log('created: 数据观测和事件配置已经完成，DOM 尚未生成');
  },
  // beforeMount 钩子在挂载开始之前被调用：相关的 render 函数首次被调用。
  beforeMount() {
    console.log('beforeMount: 模板编译完成，即将挂载到真实 DOM');
  },
  // mounted 钩子在实例挂载到 DOM 后被调用。此时可以访问 DOM 元素。
  mounted() {
    console.log('mounted: 实例已经挂载到 DOM，可以操作 DOM 元素');
  },
  // beforeUpdate 钩子在数据更新时调用，在虚拟 DOM 打补丁之前调用。
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新，虚拟 DOM 即将更新');
  },
  // updated 钩子在数据更新后调用，在虚拟 DOM 更新后调用。
  updated() {
    console.log('updated: 数据更新，虚拟 DOM 已经更新');
  },
  // beforeDestroy 钩子在实例销毁之前调用。此时实例仍然完全可用。
  beforeDestroy() {
    console.log('beforeDestroy: 实例即将被销毁，但仍可访问');
  },
  // destroyed 钩子在实例销毁后调用。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  destroyed() {
    console.log('destroyed: 实例已经被销毁');
  }
});

解释说明：

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created：实例创建完成后被调用。此时完成了数据观测等，但尚未挂载到 DOM 上。
• beforeMount：挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：实例挂载到 DOM 后被调用。此时可以访问 DOM 元素。
• beforeUpdate：数据更新时调用，在虚拟 DOM 打补丁之前调用。
• updated：数据更新后调用，在虚拟 DOM 更新后调用。
• beforeDestroy：实例销毁之前调用。此时实例仍然完全可用。
• destroyed：实例销毁后调用。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

这些钩子函数可以帮助你在 Vue 实例的生命周期中执行特定的操作。