Vue3的生命周期以及生命周期钩子函数和SFC拼接页面的语法和使用

一、Vue 3的生命周期

Vue 3的生命周期包括了创建、挂载、更新和销毁等阶段，每个阶段都有对应的生命周期钩子函数可以进行操作。

Vue 3中常用的生命周期钩子函数及其对应阶段：

1. beforeCreate : 实例刚被创建，数据观测和事件配置之前被调用。
2. created : 实例已经创建完成，数据观测和事件配置已完成，但挂载阶段还未开始。
3. beforeMount : 在挂载开始之前被调用。
4. mounted : 实例已经挂载到DOM上。
5. beforeUpdate : 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6. updated : 数据更改导致虚拟DOM重新渲染和打补丁之后被调用。
7. beforeUnmount : 实例被销毁之前调用。
8. unmounted : 实例被销毁后调用。

二、单文件组件（SFC）

在Vue 3中，使用单文件组件（SFC）拼接页面是非常常见的做法。

<template>
 <div>
   <p>{
  { message }}</p>
   <button @click="updateMessage">Update Message</button>
 </div>
</template>

<script>
export default {
     
 data() {
     
   return {
     
     message: 'Hello, Vue 3!'
   };
 },
 methods: {
     
   updateMessage() {
     
     this.message = 'Updated Message!';
   }
 },
 mounted() {
     
   console.log('Component mounted');
 },
 beforeUnmount() {
     
   console.log('Component will unmount');
 }
};
</script>

上面定义了一个简单的Vue组件，包括了模板、数据、方法以及生命周期钩子函数。当组件挂载到DOM上时，会输出"Component mounted"，当组件将要被销毁时，会输出"Component will unmount"。

原文链接: https://blog.csdn.net/2401_82884096/article/details/136968390