vue钩子

// Vue钩子函数示例

// 创建一个Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  // beforeCreate 钩子在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  beforeCreate() {
    console.log('beforeCreate: 实例创建之前');
  },
  // created 钩子在实例创建完成后被调用。此时完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
  created() {
    console.log('created: 实例创建完成');
  },
  // beforeMount 钩子在挂载开始之前被调用：相关的 render 函数首次被调用。
  beforeMount() {
    console.log('beforeMount: 挂载开始之前');
  },
  // mounted 钩子在挂载到 DOM 后被调用。此时可以访问 DOM 元素。
  mounted() {
    console.log('mounted: 挂载到 DOM 后');
  },
  // beforeUpdate 钩子在数据更新时调用，在虚拟 DOM 打补丁之前调用。
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  // updated 钩子在数据更新后调用，在虚拟 DOM 打补丁之后调用。
  updated() {
    console.log('updated: 数据更新后');
  },
  // beforeDestroy 钩子在实例销毁之前调用。此时实例仍然完全可用。
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  // destroyed 钩子在实例销毁后调用。此时所有的事件监听器已经被移除，所有的子实例也已经被销毁。
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
});

解释说明：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：在实例创建完成后被调用。此时完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted：在挂载到 DOM 后被调用。此时可以访问 DOM 元素。
5. beforeUpdate：在数据更新时调用，在虚拟 DOM 打补丁之前调用。
6. updated：在数据更新后调用，在虚拟 DOM 打补丁之后调用。
7. beforeDestroy：在实例销毁之前调用。此时实例仍然完全可用。
8. destroyed：在实例销毁后调用。此时所有的事件监听器已经被移除，所有的子实例也已经被销毁。

这些钩子函数可以帮助你在不同的生命周期阶段执行特定的操作。