26.生命周期钩子

我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周
期钩子。

那么setup中如何使用生命周期函数呢？

• 可以使用直接导入的 onX 函数注册生命周期钩子；
• 这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部全局状态来定位当前活动实例 (此时正在调用其 setup() 的组件实例)。

因为setup函数的执行其实比beforeCreate和created生命周期钩子的执行还早，所以在beforeCreate和created生命周期执行的代码直接在setup中执行就行

image.png

<template>
  <div>
    <h1>计数：{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import {
  onMounted,
  onBeforeMount,
  onUnmounted,
  onBeforeUnmount,
  onUpdated,
  onBeforeUpdate,
  onActivated,
  onDeactivated,
  ref,
} from "vue";
export default {
  setup() {
    // 1.compositionApi没有关于beforeCreate和created的生命周期钩子
    //想要在beforeCreate和created生命周期做的事情直接在setup中编写就行
    //setup的调用比beforeCreate和created更早
    onBeforeMount(() => {
      console.log("onBeforeMounted");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
    onActivated(() => {
      console.log("onActivated");
    });
    onDeactivated(() => {
      console.log("onDeactivated");
    });

    let count = ref(0);
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

<style lang="scss" scoped></style>

此文档主要内容来源于王红元老师的vue3+ts视频教程