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

最新推荐文章于 2024-03-24 21:13:51 发布
最新推荐文章于 2024-03-24 21:13:51 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： Vue 文章标签： 钩子函数 vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43592084/article/details/109743939
版权

  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. 点击按钮更新组件在这里插入图片描述

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

together UP
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue3 + Vue-cli (1) 基础篇
小草莓的博客
01-09 5180
一、官网 Vue3 官网：https://v3.cn.vuejs.org/ Vue-cli 官网：https://cli.vuejs.org/zh/ 二、Vue3的新特性 01、Vue3 采用渐进式开发，向下兼容 02、性能提升 打包大小减少41% 初次渲染快55% 更新快133% 内存使用减少54% 03、Composition API集合，解决Vue2组件开发问题 04、新的API加入 Teleport瞬移组件 Suspense解决异步加载组件问题 05、..
Vue 3 + Ts 钩子函数（hooks）的用法，以＜script setup lang=“ts“/＞语法糖形式 #reactive #ref
qq_46703281的博客
01-23 637
Vue 3 + Ts 钩子函数（hooks）的用法，以语法糖形式 #reactive #ref
vue3之生命周期
最新发布
小李在努力学习
03-24 1328
生命周期
vue2+ts: 如何使用组件级路由钩子函数
qq_38969618的博客
07-07 752
vue2+ts
Vue3 版本的生命周期和钩子函数
m0_58352785的博客
03-01 2512
文章目录 一、什么是生命周期 二、Vue2.x与Vue3.x生命周期对比 1.onRenderTracked 2.onRenderTriggered 总结 一、什么是生命周期 Vue 是组件化编程，从一个组件诞生到消亡，会经历很多过程，这些过程就叫做生命周期 Vue3 的生命周期 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method onBeforeMount() : 组件挂载到节点上之前执行的函...
Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】
Clover ‘s Blog
03-16 1178
onRenderTracked()状态跟踪和onRenderTriggered() 状态触发
Vue3+TS教程
热门推荐
qq_45897636的博客
09-27 3万+
VueTs教程，
Vue3/ Vue3 生命周期 钩子函数 总结 、Vue3 内 主要 钩子函数 、Vue2 和 Vue3 生命周期钩子函数对比
m0_64494670的博客
01-08 3924
Vue3/ Vue3 生命周期 钩子函数 总结 、Vue3 内 主要 钩子函数 、Vue2 和 Vue3 生命周期钩子函数对比
ts语法如何在Vue3中运用?
weixin_48082900的博客
02-20 3667
ts语法和vue3项目的结合使用
Vue 2.0中生命周期与钩子函数的一些理解
08-30
主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料，对大家学习或者使用vue2.0具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧。
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
vue3+Ts 2 组件+生命周期
weixin_55683934的博客
04-20 677
如有雷同 纯属巧合
vue3生命周期钩子函数
lzfengquan的博客
06-14 8692
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项beforeCreate () { console.log(‘beforeCreate’); }, created () { console.log(‘created’); }, beforeMount () { console.log(‘beforeMount’); }, mounted () { console.log(‘mounted’); }, beforeUpdate () { console.log(‘befor
Vue3生命周期函数的那些事
weixin_45745641的博客
11-11 3630
前言 这篇文章给大家介绍关于Vue3中生命周期函数的问题 使用过Vue3的朋友都知道，随着 composition API 的引入，我们在使用钩子函数上也发生了一些改变 Vue3的生命周期函数 下面告诉大家vue2和vue3的生命周期函数改变了哪些： vue2 —> vue3: beforeCreate -> 不需要 created -> 不需要 beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -&
vue3的生命周期函数
z17864151193的博客
04-03 1万+
Vue2和Vue3中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数，并且我们仍然希望将它们用于相同的用例。 但是，随着CompositionAPI的引入，我们访问这些钩子函数的方式已经改变。 到本文结束时，你将了解在Vue3中使用生命周期钩子函数的新方法，并开始编写更好的代码。 什么是Composition API 如果你还不知道，Vue3 Composition API 附带了一个setup()方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。 ...
Vue3 的生命周期函数
廖若星辰-LTY
10-25 2251
此时内存中的数据已经被修改，但还没有更新到页面上，可以访问到旧的DOM。，用于跟踪所有响应式变量和方法，一旦页面有 update ，就会跟踪他们并。，与 keep-alive 一起使用，当 keep-alive 包裹的。，与 keep-alive 一起使用，当 keep-alive 包裹的。，此时内存数据已经修改，页面数据也已经更新，可以访问到新的DOM。，状态触发，同样是vue3新引入的钩子函数，，状态跟踪，vue3新引入的钩子函数，，挂载完成后调用，此时。，卸载组件实例后调用。
小程序钩子函数 onload
weixin_49848930的博客
09-23 566
注意：onload钩子函数 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 有一些数据是在上一个页面通过地址栏传过来的想在这个页面获取地址栏中传的数据时 可以在onload中写 onload（option）{ console.log(option) // 这里就是地址栏传过来的数据 } ...
vue2和vue3生命周期钩子函数
09-26
Vue 2和Vue 3都有一些常用的生命周期钩子函数，但在Vue 3中有一些变化。以下是Vue 2和Vue 3中常用的生命周期钩子函数： Vue 2中的生命周期钩子函数： 1. beforeCreate: 实例创建之前调用，此时数据观测（data ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值