vue3第3课：生命周期

写一个简单的vue文件，每次点击的时候，让num加一

<template>
  <div class="life">
    {{ num }}
    <button @click="addNum">加1</button>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";

export default defineComponent({
  name: "Life",
  components: {},
  setup() {
    console.log("setup");
    const data = reactive({
      num: 1,
      addNum: () => {
        data.num++;
      },
    });
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });

    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });

    onUpdated(() => {
      console.log("onUpdated");
    });

    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
});
</script>

<style lang="scss">
.life {
  margin-top: 40px;
}
</style>

保存后刷新页面，可以看到控制台打印出了 在点击+1按钮后会打印

首先需要注意，在vue3中，生命周期在使用时，需要按需进行引入。使用了setup()替代了beforeCreate和beforeCreate。在兼容性方面，vue2.X生命周期在vue3仍然可以使用。在vue3中使用生命周期钩子时，以箭头函数的方式写在setup()中，并用;分开 。在看一下两者之间的生命周期对比

很容易的可以看出vue3的钩子函数基本上都是在vue2的基础上加上一个on，特殊的是， 1.BeforeDestroy变成了onBeforeUnmount
2.destroyed变成了onUnmounted
尤雨溪说得是，mount比destroy更形象，也跟beforeMount对应上

本次学习到此结束，有问题欢迎大家留言评论，一起学习。啦啦啦啦