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

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

together UP

2888人浏览 · 2020-11-17 16:34:28

together UP · 2020-11-17 16:34:28 发布

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>

运行一下

初始化
点击按钮更新组件

参考资料：https://www.bilibili.com/video/BV1L5411j7vj?p=7

特殊的钩子函数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函数返回了一个对象，其中包含了状态更新的组件的信息。
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^