Vue3——的生命周期钩子函数语法

在Vue 3中，生命周期钩子函数可以在组件的不同生命周期阶段执行自定义逻辑，本文介绍Vue 3中常用的生命周期钩子函数及其语法。

1. beforeCreate

• 在实例初始化之后，数据观测和事件配置之前被调用。
• 无法访问到 this 上的数据和方法。

export default {
  beforeCreate() {
    console.log('beforeCreate hook called');
  }
};

2. created

• 在实例创建完成后被调用。
• 可以访问 this 上的数据，但无法访问DOM。

export default {
  created() {
    console.log('created hook called');
  }
};

3. beforeMount

• 在挂载开始之前被调用。
• 可以访问到虚拟DOM和 this 上的数据。

export default {
  beforeMount() {
    console.log('beforeMount hook called');
  }
};

4. mounted

• 在挂载完成后被调用。
• 可以访问到DOM元素和 this 上的数据。

export default {
  mounted() {
    console.log('mounted hook called');
  }
};

5. beforeUpdate

• 在数据更新时调用，但在虚拟DOM重新渲染之前。
• 可以访问到更新前的数据和 this 上的数据。

export default {
  beforeUpdate() {
    console.log('beforeUpdate hook called');
  }
};

6. updated

• 在数据更新导致虚拟DOM重新渲染和打补丁之后调用。
• 可以访问到更新后的数据和 this 上的数据。

export default {
  updated() {
    console.log('updated hook called');
  }
};

7. beforeUnmount

• 在实例销毁之前调用。
• 可以执行一些清理操作，如清除定时器等。

export default {
  beforeUnmount() {
    console.log('beforeUnmount hook called');
  }
};

8. unmounted

• 在实例被销毁后调用。
• 可以进行一些最终的清理工作。

export default {
  unmounted() {
    console.log('unmounted hook called');
  }
};

通过使用这些生命周期钩子函数，可以在不同的阶段添加自定义逻辑，以便在组件的生命周期中执行特定的操作。