Vue中的组件生命周期

在Vue中，组件的生命周期可以分为四个主要的阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。每个阶段都有一些特定的钩子函数，可以注入自定义的逻辑。

1. 创建阶段：

   • beforeCreate：实例初始化之后，数据观测(data observer)和事件/watcher 设置之前调用。
   • created：实例创建完成后被调用，在这一步中，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

2. 挂载阶段：

   • beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
   • mounted：实例挂载到DOM上后调用，这时候组件的$el属性可用。

3. 更新阶段：

   • beforeUpdate：数据更新时调用，此时DOM还未更新。
   • updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后调用。

4. 销毁阶段：

   • beforeDestroy：实例销毁之前调用。
   • destroyed：Vue实例销毁后调用，此时组件的所有指令都被解绑，所有的事件监听器都被移除，所有的子实例也都被销毁。

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

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例被创建之前');
  },
  created() {
    console.log('created: 实例创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 挂载之前');
  },
  mounted() {
    console.log('mounted: 挂载完成');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新之前');
  },
  updated() {
    console.log('updated: 数据更新完成');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁完成');
  }
};
</script>

当这个组件被挂载到DOM中时，会依次触发beforeCreate、created、beforeMount、mounted钩子。如果message数据属性在组件中被更改，会触发beforeUpdate、updated钩子。当组件被销毁时，会触发beforeDestroy、destroyed钩子。