【Vue3 生命周期与组合式API】

文章目录

  • 一、Vue3 生命周期概述
  • 二、Vue3 组合式API 与选项式API 的对比
    • 1. 选项式API 生命周期钩子函数
      • 常用的生命周期钩子函数包括:
    • 2. 组合式API 的优势
      • 组合式API 的主要优势包括:
      • 在生命周期管理上的优势
  • 三、Vue3 组合式API 生命周期钩子函数
    • 1. setup 函数
      • 特点和作用:
    • 2. onBeforeMount
      • 代码示例:
      • 使用场景:
    • 3. onMounted
      • 代码示例:
      • 使用场景:
    • 4. onBeforeUpdate
      • 代码示例:
      • 使用场景:
    • 5. onUpdated
      • 代码示例:
      • 使用场景:
    • 6. onBeforeUnmount
      • 代码示例:
      • 使用场景:
    • 7. onUnmounted
      • 代码示例:
      • 使用场景:
    • 8. 其他生命周期钩子函数
  • 四、生命周期钩子函数的应用实例
    • 示例1:数据加载和DOM操作
    • 示例2:资源清理
    • 示例3:依赖于props的异步操作

一、Vue3 生命周期概述

Vue3 的生命周期钩子函数可以帮助开发者在组件的不同阶段执行特定的逻辑,以便更好地管理和优化应用。

Vue的组件实例从创建到销毁会经历一系列的生命周期阶段,每个阶段都有相应的钩子函数,开发者可以利用这些钩子函数在组件的生命周期中的关键时刻注入自己的代码。

  1. 初始化阶段:在这个阶段,Vue会进行事件和生命周期的初始化。对于组合式 API,这个阶段主要与setup函数的调用相关。

  2. 模板编译阶段:将模板编译成渲染函数的阶段。这个阶段在使用组合式 API 时通常不需要直接操作。

  3. 挂载阶段:组件被挂载到 DOM 上。在组合式 API 中,对应的生命周期钩子函数是onBeforeMountonMounted

  4. 更新阶段:当组件的数据变化时,组件会重新渲染。在这个阶段,可以利用onBeforeUpdateonUpdated钩子函数执行特定逻辑。

  5. 卸载阶段:组件从 DOM 中移除。这个阶段的钩子函数是onBeforeUnmountonUnmounted

在 Vue3 的组合式 API 中,所有这些生命周期钩子函数都可以直接在setup函数中使用,这提供了一种更灵活、更函数式的方式来组织和复用组件逻辑。通过这种方式,Vue3 不仅保持了其响应式系统的核心优势,还在组件逻辑复用方面做出了革新。

二、Vue3 组合式API 与选项式API 的对比

Vue.js 提供了两种主要的API风格来编写组件:选项式 API 和组合式 API。

1. 选项式API 生命周期钩子函数

选项式 API 是 Vue2.x 引入的,Vue3 亦保留了这种风格。在选项式 API 中,组件的逻辑是通过一个包含各种属性的对象来组织的,其中包括数据、方法、生命周期钩子等。

常用的生命周期钩子函数包括:

  • beforeCreate:在实例初始化之后,数据观察和事件/侦听器配置之前被调用。
  • created:在实例创建完成后被立即调用,此时数据观察、属性和方法的运算、事件/侦听器的回调已经设置好了。
  • beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
  • mounted:在实例被挂载后调用,此时可以访问到 DOM。
  • beforeUpdate:在数据变化导致的虚拟DOM重新渲染和打补丁之前调用。
  • updated:在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
  • beforeUnmount(Vue3 新增):在卸载组件实例之前调用。
  • unmounted(Vue3 新增):在卸载组件实例之后调用。

这些生命周期钩子提供了在组件不同阶段执行代码的机会,让开发者可以有效地管理组件的状态和行为。

2. 组合式API 的优势

Vue3 引入了组合式 API 作为一个全新的编写组件的方式,旨在解决 Vue2.x 在组件复用和逻辑组织方面的一些限制。

组合式API 的主要优势包括:

  • 更好的逻辑组织和复用:组合式 API 通过 setup 函数和其他 Composition API 函数(如 reactive, computed, watch)允许开发者更自然地提取和重用逻辑代码,而不是将逻辑分散在选项式 API 的不同选项中。
  • 更清晰的代码结构:组合式 API 使得相关功能的代码更加集中,有助于提高代码的可读性和维护性。
  • 对 TypeScript 的更好支持:组合式 API 与 TypeScript 配合得更紧密,提供了更好的类型推导和类型检查,使得开发大型应用时代码更健壮。
  • 更细粒度的代码分割:通过使用组合式 API,开发者可以更灵活地控制组件的各个方面,比如状态的声明、副作用的执行等,从而更精细地优化组件的行为和性能。

在生命周期管理上的优势

组合式 API 中,生命周期钩子也被作为函数(如 onMounted, onUpdated)提供,可以直接在 setup 函数内部使用。这种方式使得生命周期钩子的调用更加直观和灵活,可以更紧密地与组件的其他逻辑结合,提高了代码的组织性和可读性。此外,它也让跨组件的逻辑复用变得更加简单,可以将生命周期钩子和相关逻辑一起封装和复用。

三、Vue3 组合式API 生命周期钩子函数

1. setup 函数

setup 函数是 Vue3 组合式 API 中最重要的一个新概念。它在组件创建之初就被调用,用于替代 Vue2 中的 data, computed, methods, watch, 以及生命周期钩子函数的部分功能。

特点和作用:

  • setup 函数执行时,组件的 props 和 context(包括 slots 和 emits)已经被初始化。
  • 该函数返回的对象中的属性和方法将被暴露给组件的模板。
  • setup 函数是响应式的,可以使用 reactive, ref 等 API 在其中创建和管理状态。

2. onBeforeMount

在组件被挂载到 DOM 之前调用。

代码示例:

import { onBeforeMount } from 'vue';export default {setup() {onBeforeMount(() => {console.log('Component is about to be mounted!');});}
}

使用场景:

  • 初始化或配置 DOM 相关的操作前的准备工作。

3. onMounted

在组件被挂载到 DOM 之后调用。

代码示例:

import { onMounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component has been mounted!');});}
}

使用场景:

  • 访问或修改 DOM 元素。
  • 发送 AJAX 请求获取数据。

4. onBeforeUpdate

在组件更新之前调用。

代码示例:

import { onBeforeUpdate } from 'vue';export default {setup() {onBeforeUpdate(() => {console.log('Component is about to update!');});}
}

使用场景:

  • 在组件更新前执行特定操作,如读取当前 DOM 状态。

5. onUpdated

在组件更新之后调用。

代码示例:

import { onUpdated } from 'vue';export default {setup() {onUpdated(() => {console.log('Component has been updated!');});}
}

使用场景:

  • 更新完成后的 DOM 操作。
  • 更新完成后的清理工作。

6. onBeforeUnmount

在组件卸载之前调用。

代码示例:

import { onBeforeUnmount } from 'vue';export default {setup() {onBeforeUnmount(() => {console.log('Component is about to be unmounted!');});}
}

使用场景:

  • 清理组件使用的资源,如事件监听器。

7. onUnmounted

在组件卸载之后调用。

代码示例:

import { onUnmounted } from 'vue';export default {setup() {onUnmounted(() => {console.log('Component has been unmounted!');});}
}

使用场景:

  • 完成组件卸载后的最后清理工作。

8. 其他生命周期钩子函数

Vue3 还提供了其他一些生命周期钩子函数,用于特定场景:

  • onActivatedonDeactivated:用于 <keep-alive> 缓存的组件激活和停用。
  • onErrorCaptured:用于捕获组件树中所有子孙组件的错误。
  • onRenderTrackedonRenderTriggered:用于调试,追踪和触发渲染。

四、生命周期钩子函数的应用实例

示例1:数据加载和DOM操作

onMounted 钩子函数是获取数据的理想选择,它保证了组件已经被挂载,因此可以安全地访问到 DOM 元素或进行数据请求。

import { onMounted, ref } from 'vue';
import axios from 'axios';export default {setup() {const posts = ref([]);onMounted(async () => {try {const response = await axios.get('https://api.example.com/posts');posts.value = response.data;} catch (error) {console.error('Failed to fetch posts:', error);}});return { posts };}
}

使用 onMounted 钩子函数发送 AJAX 请求获取数据,并将数据存储在响应式的 posts 变量中。

示例2:资源清理

在组件中注册事件监听器或定时器时,很重要的一点是在组件卸载前清理这些资源,以避免内存泄漏。这可以通过 onUnmounted 钩子函数来实现。

import { onMounted, onUnmounted, ref } from 'vue';export default {setup() {const isConnected = ref(false);const connect = () => {// 假设这是连接到某个服务的函数isConnected.value = true;};const disconnect = () => {// 断开连接isConnected.value = false;};onMounted(() => {connect();// 假设我们监听 window 的 resize 事件window.addEventListener('resize', connect);});onUnmounted(() => {disconnect();window.removeEventListener('resize', connect);});return { isConnected };}
}

在这个示例中,onMounted 用于注册事件监听器和初始化连接,而 onUnmounted 用于在组件销毁时移除事件监听器和清理资源。

示例3:依赖于props的异步操作

有时需要在组件中根据 props 的变化来执行异步操作,例如根据从父组件传入的用户ID获取用户信息。这种场景下可以使用 watchonMounted 钩子函数结合使用。

import { watch, onMounted, ref } from 'vue';
import axios from 'axios';export default {props: {userId: Number},setup(props) {const userInfo = ref(null);const fetchUserInfo = async (id) => {try {const response = await axios.get(`https://api.example.com/users/${id}`);userInfo.value = response.data;} catch (error) {console.error('Failed to fetch user info:', error);}};onMounted(() => fetchUserInfo(props.userId));watch(() => props.userId, (newId) => {fetchUserInfo(newId);});return { userInfo };}
}

这个示例展示了如何在组件被挂载时以及 userId prop 更改时重新获取用户信息。这种方式确保了即使 userId 在组件生命周期内发生变化,用户信息也能保持最新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/7659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语音识别--降噪

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

三剑客之grep

grep初级简单使用&#xff1a;Liunx查找&过滤-CSDN博客 正则表达式-CSDN博客 目录 grep分类 返回值 使用返回值控制流程 grep参数示例 基本参数 grep与正则表达式的搭配使用与示例 看完正则与示例进行无答案式练习 grep 用于在文件或输入流中查找特定模式或文本。…

uniapp的app端推送功能,不使用unipush

1&#xff1a;推送功能使用htmlPlus实现&#xff1a;地址HTML5 API Reference (html5plus.org) 效果图&#xff1a; 代码实现&#xff1a; <template><view class"content"><view class"text-area"><button click"createMsg&q…

什么是DDoS攻击?DDoS攻击的原理是什么?

一、DDoS攻击概念 DDoS攻击又叫“分布式拒绝服务”(Distributed DenialofService)攻击&#xff0c;它是一种通过控制大量计算机、物联网终端或网络僵尸&#xff08;Zombie&#xff09;来向目标网站发送大量请求&#xff0c;从而耗尽其服务器资源&#xff0c;导致正常用户无法访…

设计网页用什么软件

在设计网页时&#xff0c;可以使用多种软件来完成不同的任务。以下是一些常用的网页设计软件&#xff0c;以及它们的特点和用途。 1. Adobe Photoshop&#xff1a; Adobe Photoshop 是一款功能强大的图像编辑软件。在网页设计中&#xff0c;它常用于创建和编辑网页所需的图像、…

详细介绍如何在Windows系统上安装Anaconda

**一、引言** Anaconda是一个开源的Python发行版本&#xff0c;它包含了conda、Python等180多个科学包及其依赖项。Anaconda的优点在于它可以帮助用户解决安装包的依赖问题&#xff0c;方便用户管理多个环境&#xff0c;并且提供了一个完整的科学计算环境。本指南将详细介绍如…

手动配置dns后网速变慢

之前因为自动的dns能上qq但打不开网页&#xff0c;就手动设置了一个&#xff0c;结果近些天时不时出现网页图片加载慢的问题&#xff0c;影响到我看美女图片了&#xff0c;是可忍熟不可忍 测了下网速&#xff0c;很快&#xff0c;下载上传都是三位数的&#xff0c;那显然不是网…

element+ant 组件点

ant中table设置默认排序 a-table中的:column属性,设置对应的列上 item.sortOrder params.sort_type asc ? ascend : descend 判断ant-table中是否有横向坐标轴 const hasHorizontalScrollbar() > {const table document.querySelector(.ant-table-content);//可修改,…

RabbitMQ是如何保证消息可靠性的?——Java全栈知识(16)

RabbitMQ 的消息不可靠也就是 RabbitMQ 消息丢失只会发生在以下几个方面&#xff1a; 生产者发送消息到 MQ 或者 Exchange 过程中丢失。Exchange 中的消息发送到 MQ 中丢失。消息在 MQ 或者 Exchange 中服务器宕机导致消息丢失。消息被消费者消费的过程中丢失。 大致就分为生…

Star-CCM+分配零部件至区域1-将所有零部件分配至区域

前言 Star-CCM中&#xff0c;在划分网格之前需要将零部件分配至区域&#xff0c;然后才可以划分网格。如下图1所示&#xff0c;分配零部件至区域需要选择创建区域的方式、创建边界的方式以及交界面的类型。 图1 将零部件分配至区域 1 创建区域的方式选择 如下图2所示&#x…

基于Spring Boot的家具网站设计与实现

基于Spring Boot的家具网站设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 系统前台主界面图&#xff0c;用户可进入家具网站可查看…

RFC 791 (2) - Overview

目录 总览 操作 Addressing 与 Fragmentation Addressing Fragmentation 总览 RFC791文档的第二部分就是对IP进行总浏览&#xff1a;可以看到&#xff0c;我们的五层划分是这样的&#xff1a; ------ ----- ----- ----- |Telnet| | FTP | | TFTP| ... | ... | -----…

【Linux深度学习笔记5.7】

5.6学习笔记 文件查找: 语法:find $路径 name | type | perm | size | atime | mtime | ctime 操作对象find /opt/ -name a.txt ----> -iname (忽略大小写)find / -perm 000 ----> 权限查找find / -size 5M ----> 大小查找 5M (大于5M) -5M (小于5M)find /etc/…

探索大模型能力--prompt工程

1 prompt工程是什么 1.1 什么是Prompt&#xff1f; LLM大语言模型终究也只是一个工具&#xff0c;我们不可能每个人都去训一个大模型&#xff0c;但是我们可以思考如何利用好大模型&#xff0c;让他提升我们的工作效率。就像计算器工具一样&#xff0c;要你算10的10倍&#x…

Java IO类之FilterOutputStream的研究与应用

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

mybatis-plus编程接口

简介 使用Java语言对数据库进行操作&#xff0c;通常需要继承一些依赖Spring容器的ORM框架。在后端项目中非常高效且稳定。但对于一些客户端或者一些临时任务&#xff0c;非Spring环境下想对数据库进行简单的CRUD通常需要使用JDBC来实现&#xff0c;这种方式要自己拼接SQL&…

C语言中static和volatile关键字的作用

static 作用&#xff1a; 1 修饰局部变量&#xff1a;表示该局部变量只初始化一次&#xff0c;地址空间不释放 2 修饰全局变量&#xff1a;表示该全局变量只在此文件中使用&#xff0c;别的文件无法访问此变量 3 修饰函数&#xff1a; 表示修饰的函数只在此文件中使用&#xff…

RCE学习(一)

一.知识点 RCE&#xff1a;远程命令/代码执行漏洞&#xff0c;简称为RCE漏洞&#xff0c;可以直接向服务器后台远程注入操作系统的命令或者代码&#xff0c;从而拿到服务器后台的权限。RCE分为远程执行命令&#xff08;执行ping命令&#xff09;和远程代码执行eval 简单来说就…

VMware导入ova/ovf虚拟机文件

1.文件-打开-ova文件 2.为新虚拟机起名称 3.等待导入 4.导入完成&#xff0c;可以开始使用 参考链接&#xff1a;VMware导入ova/ovf虚拟机文件

浅谈Session和Cookie

各位大佬光临寒舍&#xff0c;希望各位能赏脸给个三连&#xff0c;谢谢各位大佬了&#xff01;&#xff01;&#xff01; 目录 1.Cookie 2.Sesssion&#xff08;会话&#xff09; 3.Session和Cookie的联系 4.总结 1.Cookie Cookie是客户端存储数据的机制&#xff0c;一般是…