了解vue3的生命周期和钩子函数写法

使用 Vue 3 的组合式 API 和 <script setup> 语法糖，可以更加简洁和清晰地处理组件的生命周期钩子。
以下是vue2对比vue3常用的生命周期钩子及其在 <script setup> 中的写法对比：

vue2选项式	vue3选项式	vue3组合式
beforeCreate	beforeCreate	setup 函数
created	created	setup 函数
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	beforeUnmount	onBeforeUnmount
destroyed	unmounted	onUnmounted

Vue 2 选项式 API

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 2!'
    };
  },
  methods: {
   //方法
  },
  computed: {
   //计算属性
  },
  watch: {
   //监听
  },
  beforeCreate() {
    console.log('Component is before created');
  },
  created() {
    console.log('Component is created');
  },
  beforeMount() {
    console.log('Component is about to mount');
  },
  mounted() {
    console.log('Component is mounted');
  },
  beforeUpdate() {
    console.log('Component is about to update');
  },
  updated() {
    console.log('Component is updated');
  },
  beforeDestroy() {
    console.log('Component is about to be destroyed');
  },
  destroyed() {
    console.log('Component is destroyed');
  }
};
</script>

Vue 3 选项式 API

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  methods: {
   //方法
  },
  computed: {
   //计算属性
  },
  watch: {
   //监听
  },
  beforeCreate() {
    console.log('Component is before created');
  },
  created() {
    console.log('Component is created');
  },
  beforeMount() {
    console.log('Component is about to mount');
  },
  mounted() {
    console.log('Component is mounted');
  },
  beforeUpdate() {
    console.log('Component is about to update');
  },
  updated() {
    console.log('Component is updated');
  },
  beforeUnmount() {
    console.log('Component is about to unmount');
  },
  unmounted() {
    console.log('Component is unmounted');
  }
};
</script>

Vue 3 组合式 API

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    onBeforeMount(() => {
      console.log('Component is about to mount');
    });

    onMounted(() => {
      console.log('Component is mounted');
    });

    onBeforeUpdate(() => {
      console.log('Component is about to update');
    });

    onUpdated(() => {
      console.log('Component is updated');
    });

    onBeforeUnmount(() => {
      console.log('Component is about to unmount');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    return {
      message
    };
  }
};
</script>

//语法糖写法
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

const message = ref('Hello, Vue 3!');

onBeforeMount(() => {
  console.log('Component is about to mount');
});

onMounted(() => {
  console.log('Component is mounted');
});

onBeforeUpdate(() => {
  console.log('Component is about to update');
});

onUpdated(() => {
  console.log('Component is updated');
});

onBeforeUnmount(() => {
  console.log('Component is about to unmount');
});

onUnmounted(() => {
  console.log('Component is unmounted');
});
</script>

使用 <script setup> 语法糖，无需显式返回 setup 函数中的变量，所有声明的变量都自动成为模板可访问的部分。
可以直接在 <script setup> 中使用 onBeforeMount、onMounted 等钩子函数。