vue

Vue3.x中的生命周期和钩子函数（部分）

2020-11-17  本文已影响0人  咧咧0622

  Vue组件化编程中的生命周期，可以理解为组件在不同时间段能执行的不同的函数，这些函数也叫钩子函数。
  钩子函数伴随着生命周期，是专门暴露给用户的，用来控制生命周期。因此，我们想要理解生命周期，就需要理解钩子函数。
  在Vue3.x中，钩子函数做了一些改动，我们通过下面的例子框架来了解它。

<template>
  <div>
    <button
      v-for="(item, index) in arr"
      v-bind:key="index"
      @click="selectOneFun(index)"
    >
      {{ index }}:{{ item }}
    </button>
  </div>
  <div>你选择了【{{ selectOne }}】</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

<style>
</style>
在这里插入图片描述

点击按钮可以更新组件


在这里插入图片描述

setup()

  在创建组件之前执行。

<script lang="ts">
// setup()不需要多余的import引入
import { ref, reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
  
    console.log("1...setup()开始创建组件");
    
    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};

onBeforeMount()

  组件挂在到页面之前执行。

<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeMount } from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onBeforeMount 
    onBeforeMount(() => {
      console.log("2...onBeforeMount()组件挂在到页面之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onMounted()

  组件挂在到页面之后执行。

<script lang="ts">
// 引入onMounted 钩子
import { ref, reactive, toRefs, onMounted } from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onMounted 
    onMounted(() => {
      console.log("3...onMounted()组件挂在到页面之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onBeforeUpdate()

  在组件更新之前执行。

<script lang="ts">
// 引入onBeforeUpdate钩子
import { ref, reactive, toRefs, onBeforeUpdate} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onBeforeUpdate
    onBeforeUpdate(() => {
      console.log("4...onBeforeUpdate()在组件更新之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onUpdated()

  在组件更新之后执行。

<script lang="ts">
// 引入onUpdated钩子
import { ref, reactive, toRefs, onUpdated} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onUpdated
    onUpdated(() => {
      console.log("5...onUpdated()在组件更新之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onBeforeUnmount()

  在组件卸载之前执行。

<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeUnmount} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onBeforeUnmount
    onBeforeUnmount(() => {
      console.log("6...onBeforeUnmount()在组件卸载之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onUnmounted()

  在组件卸载之后执行。

<script lang="ts">
// 引入onUnmounted钩子
import { ref, reactive, toRefs, onUnmounted} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onUnmounted
    onUnmounted(() => {
      console.log("7...onUnmounted()在组件卸载之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onDeactivated()

  在组件切换中老组件消失的时候执行。

<script lang="ts">
// 引入onDeactivated钩子
import { ref, reactive, toRefs, onDeactivated} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onDeactivated
    onDeactivated(() => {
      console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

合并一下上面的代码并简单运行一下

<template>
  <div>
    <button
      v-for="(item, index) in arr"
      v-bind:key="index"
      @click="selectOneFun(index)"
    >
      {{ index }}:{{ item }}
    </button>
  </div>
  <div>你选择了【{{ selectOne }}】</div>
</template>

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

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    onBeforeMount(() => {
      console.log("2...onBeforeMount()组件挂在到页面之前执行");
    });

    onMounted(() => {
      console.log("3...onMounted()组件挂在到页面之后执行");
    });

    onBeforeUpdate(() => {
      console.log("4...onBeforeUpdate()在组件更新之前执行");
    });

    onUpdated(() => {
      console.log("5...onUpdated()在组件更新之后执行");
    });

    onBeforeUnmount(() => {
      console.log("6...onBeforeUnmount()在组件卸载之前执行");
    });

    onUnmounted(() => {
      console.log("7...onUnmounted()在组件卸载之后执行");
    });

    onDeactivated(() => {
      console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

<style>
</style>

运行一下

  1. 初始化


    在这里插入图片描述
  2. 点击按钮更新组件 在这里插入图片描述

特殊的钩子函数onRenderTriggered

  onRenderTriggered函数有一个特殊的功能，会跟踪组件的状态，并且返回一个参数保存这些状态。比如我们以更新组件状态举一个例子：

<script lang="ts">
// 引入onUpdated，onRenderTriggered钩子
import { ref, reactive, toRefs, onUpdated, onRenderTriggered} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
    //调用onUpdated
    onUpdated(() => {
      console.log("5...onUpdated()在组件更新之后执行");
    });
    //调用onRenderTriggered
    onRenderTriggered((event) => {
      console.log("9...onRenderTriggered()状态跟踪钩子函数");
      console.log(event);
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

  点击按钮更新组件，可以看到先执行了onRenderTriggered函数，后执行了onUpdated函数，且onRenderTriggered函数返回了一个对象，其中包含了状态更新的组件的信息。


在这里插入图片描述
上一篇下一篇

猜你喜欢

热点阅读