vue生命周期钩子函数

在Vue.js中，生命周期钩子函数是非常核心的概念，它们为开发者提供了在不同阶段管理组件的方式。这些钩子自动被调用，允许执行代码在特定的时刻。理解和正确使用这些生命周期钩子对于编写高效和可维护的Vue应用至关重要。

Vue生命周期的阶段

Vue实例有一系列的生命周期事件，从创建到销毁过程中会依次触发。主要可以分为以下几个阶段：

1. 初始化阶段:

   • beforeCreate：在实例初始化之后、数据观测（data observer）和事件/侦听器配置之前被调用。
   • created：在实例创建完成后被调用，此时已完成数据观测、属性和方法的运算，$el 属性目前尚不可用。

2. 模板编译阶段:

   • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时 $el 属性已经创建但还未挂载或渲染到页面。
   • mounted：在实例被挂载后调用，此时组件的DOM已经被渲染出来，可以进行DOM操作或者执行依赖于DOM的操作。

3. 数据更新阶段:

   • beforeUpdate：在数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
   • updated：在由于数据更改导致的虚拟DOM重新渲染和打补丁后调用。调用时，组件DOM已经更新，因此可以执行依赖于DOM的操作。但是要避免在此钩子中更新数据，因为这可能会导致无限循环的更新。

4. 销毁阶段:

   • beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用，可以在这里执行清理任务，如事件监听器的移除。
   • destroyed：在实例销毁后调用。调用此钩子时，Vue实例指示的所有东西都会解绑，所有的事件监听器被移除，所有的子实例也被销毁。

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例刚在内存中被创建，data和methods尚未初始化');
  },
  created() {
    console.log('created: 实例已创建完成，data和methods已经初始化');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译/挂载之前');
  },
  mounted() {
    console.log('mounted: 模板编译/挂载之后');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  updated() {
    console.log('updated: 数据更新后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
}

注意事项

• 避免在 beforeMount 和 mounted 钩子中进行数据更新，这可能会导致渲染过程再次触发。
• 不要在 updated 钩子函数中进行状态更新操作，这可能会导致更新无限循环。
• 理解何时何地使用这些生命周期钩子是提升Vue使用技巧的关键。