Vue3生命周期

2023-12-28 17:31:59

Vue3与Vue2版本生命周期相对应的组合式API

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

新增的钩子函数

组合式 API 还提供了以下调试钩子函数:

  • onRenderTracked
  • onRenderTriggered
<template>
  <div class="about">
    <h2>msg: {{msg}}</h2>
    <hr />
    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">
  import {
    ref,
    onMounted,
    onUpdated,
    onUnmounted,
    onBeforeMount,
    onBeforeUpdate,
    onBeforeUnmount,
  } from "vue";

  export default {
    beforeCreate() {
      console.log("beforeCreate()");
    },

    created() {
      console.log("created");
    },

    beforeMount() {
      console.log("beforeMount");
    },

    mounted() {
      console.log("mounted");
    },

    beforeUpdate() {
      console.log("beforeUpdate");
    },

    updated() {
      console.log("updated");
    },

    beforeUnmount() {
      console.log("beforeUnmount");
    },

    unmounted() {
      console.log("unmounted");
    },

    setup() {
      const msg = ref("abc");

      const update = () => {
        msg.value += "--";
      };

      onBeforeMount(() => {
        console.log("--onBeforeMount");
      });

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

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

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

      onBeforeUnmount(() => {
        console.log("--onBeforeUnmount");
      });

      onUnmounted(() => {
        console.log("--onUnmounted");
      });

      return {
        msg,
        update,
      };
    },
  };
</script>
<template>
  <h2>App</h2>
  <button @click="isShow=!isShow">切换</button>
  <hr />
  <Child v-if="isShow" />
</template>

<script lang="ts">
  import Child from "./Child.vue";
  export default {
    data() {
      return {
        isShow: true,
      };
    },

    components: {
      Child,
    },
  };
</script>

文章来源:https://blog.csdn.net/weixin_42202992/article/details/135273845
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。