「Vue3系列」Vue3 组合式 API

news/2024/4/13 11:17:30/文章来源:https://blog.csdn.net/xuaner8786/article/details/136566375

文章目录

  • 一、Vue3 组合式 API
  • 二、Vue3 setup 组件
  • 三、Vue3 组合式 API 生命周期钩子
  • 四、vue3 模板引用
  • 五、相关链接

一、Vue3 组合式 API

Vue 3 引入了组合式 API(Composition API),它是一种新的 API,用于构建 Vue 组件的逻辑。这种 API 解决了大型组件中逻辑难以组织和复用的问题,并提供了更灵活的方式来组织和共享代码。

组合式 API 的核心思想是将组件的逻辑分割成更小的函数(或称为“组合函数”),这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分,并提高了代码的可读性和可维护性。

以下是一些组合式 API 的关键特性:

  1. 响应式状态:使用 refreactive 函数创建响应式数据。当这些数据发生变化时,Vue 会自动更新相关的 DOM。
  2. 计算属性:使用 computed 函数创建计算属性,这些属性是基于其他响应式数据计算得出的。计算属性会缓存结果,只有在依赖的数据发生变化时才会重新计算。
  3. 侦听器:使用 watch 函数来侦听响应式数据的变化,并在数据变化时执行回调函数。
  4. 生命周期钩子:Vue 3 提供了与选项式 API 类似的生命周期钩子函数,但它们是作为函数导入的,而不是作为组件选项定义的。
  5. 提供/注入:使用 provideinject 函数在组件树中传递数据。这允许父组件向其后代组件提供数据,而无需通过 props 逐层传递。
  6. 依赖注入:组合式 API 还提供了更高级的依赖注入机制,允许跨组件共享逻辑。
  7. 组合函数:你可以创建自己的组合函数来封装可重用的逻辑。这些函数可以接收响应式数据作为参数,并返回新的响应式数据或执行其他操作。

使用组合式 API,你可以更灵活地组织和管理 Vue 组件的逻辑。它特别适用于大型、复杂的组件,以及需要共享和重用逻辑的场景。

下面是一个简单的示例,展示了如何使用组合式 API 创建一个简单的计数器组件:

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};},
};
</script>

在这个示例中,setup 函数是组合式 API 的入口点。我们使用 ref 函数创建了一个响应式数据 count,并定义了一个 increment 函数来递增 count 的值。最后,我们通过返回一个对象来暴露这些响应式数据和函数,以便在模板中使用。

二、Vue3 setup 组件

在 Vue 3 中,setup 函数是组合式 API 的核心,它提供了一个新的逻辑组织方式,允许你使用响应式状态、计算属性、方法、生命周期钩子等,而不必依赖于 Vue 组件的选项对象。setup 函数在组件被创建之前调用,并且在 beforeCreatecreated 生命周期钩子之前执行。

setup 函数接收两个参数:

  1. props:一个对象,包含了组件的属性(props)。
  2. context:一个对象,提供了 attrsslotsemit 等组件实例的属性。

setup 函数返回一个对象,该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。

下面是一个使用 setup 函数的 Vue 3 组件示例:

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { ref, computed } from 'vue';export default {props: {initialCount: {type: Number,default: 0,},},setup(props, context) {// 创建响应式状态const count = ref(props.initialCount);// 创建方法const increment = () => {count.value++;};const decrement = () => {count.value--;};// 创建计算属性const doubleCount = computed(() => count.value * 2);// 返回给模板使用的响应式状态、方法和计算属性return {count,increment,decrement,doubleCount,};},
};
</script>

在这个示例中,setup 函数接收 propscontext 参数,并创建了一个响应式状态 count,以及两个方法 incrementdecrement。此外,还创建了一个计算属性 doubleCount,它会根据 count 的值计算出一个双倍的数值。最后,setup 函数返回了一个对象,包含了这些响应式状态、方法和计算属性,这样它们就可以在模板中被使用了。

注意,由于 setup 函数在组件的 beforeCreatecreated 生命周期钩子之前执行,因此它不能访问到 this 上下文。所有的响应式状态、方法和计算属性都应该通过 setup 函数的返回值来暴露给模板。

如果你使用了 <script setup> 语法糖(这是 Vue 3.1+ 提供的一个特性),那么 setup 函数会隐式地创建,并且你可以直接在 <script setup> 标签内部编写组件的逻辑,而无需显式地定义 setup 函数。这使得组件的编写更加简洁和直观。

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

「Vue3系列」Vue3 组合式 API 生命周期钩子

四、vue3 模板引用

在 Vue 3 中,模板引用(Template Refs)是一种用于直接访问模板中 DOM 元素或子组件实例的技术。通过模板引用,你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件,从而能够直接操作它们或访问它们的属性和方法。

在 Vue 3 中,你可以使用 ref 函数来创建模板引用。这个 ref 函数不同于用于创建响应式数据的 ref 函数,它是专门用于模板引用的。

下面是一个简单的示例,展示了如何在 Vue 3 中使用模板引用:

<template><div><input ref="myInput" type="text" /><button @click="focusInput">Focus Input</button></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {// 创建模板引用const myInput = ref(null);// 方法:使输入框获得焦点const focusInput = () => {myInput.value.focus();};// 在组件挂载后打印输入框的值(可选)onMounted(() => {console.log(myInput.value); // 输出 DOM 输入框元素});// 返回模板引用和方法给模板使用return {myInput,focusInput,};},
};
</script>

在这个示例中,我们创建了一个输入框和一个按钮。输入框有一个 ref 属性,其值设置为 "myInput"。在 setup 函数中,我们使用 ref 函数创建了一个名为 myInput 的响应式引用,并将其初始值设置为 null。然后,我们定义了一个 focusInput 方法,当按钮被点击时,该方法会使输入框获得焦点。

注意,模板引用在初始时是 null,因为它们在 DOM 元素或组件实例被创建和挂载到 DOM 之后才会被赋值。因此,如果你需要在组件挂载后立即访问引用,你可以使用生命周期钩子(如 onMounted)来确保引用已经被正确赋值。

当模板渲染时,Vue 会自动将 ref 属性的值(在这个例子中是 "myInput")与我们在 setup 函数中创建的 myInput 引用关联起来。这样,我们就可以在组件的 JavaScript 代码中通过 myInput.value 来访问和操作输入框 DOM 元素了。

模板引用主要用于直接操作 DOM 或访问子组件实例,而不是用于创建响应式数据。对于需要在组件之间共享或响应变化的数据,应该使用 Vue 的响应式系统(如 refreactive)来创建和管理。

五、相关链接

  1. Vue3官方地址
  2. Vue3中文文档
  3. 「Vue3系列」Vue3简介及安装
  4. 「Vue3系列」Vue3起步/创建项目
  5. 「Vue3系列」Vue3指令
  6. 「Vue3系列」Vue3 模板语法
  7. 「Vue3系列」Vue3 条件语句/循环语句
  8. 「Vue3系列」Vue3 组件
  9. 「Vue3系列」Vue3 计算属性(computed)、监听属性(watch)
  10. 「Vue3系列」Vue3 样式绑定
  11. 「Vue3系列」Vue3 事件处理
  12. 「vue3系列」Vue3 表单

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

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

相关文章

<商务世界>《第8课 Leads——MQL——SQL——商机——成交》

1 各种概念 英文缩写概念Traffic流量Leads潜在客户&#xff0c;销售线索&#xff1b;简称潜在线索MQLMarketing-Qualified Leads市场认可线索SQLSales-Qualified Leads销售认可线索OPPOpportunity商机Account成单客户 2 线索到商机 一般企业会把自身线索进行如下的划分&…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:LoadingProgress)

用于显示加载动效的组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 LoadingProgress() 创建加载进展组件。 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使…

运维知识点-Apache HTTP Server

Apache 介绍 介绍 Apache是一个开源的Web服务器软件&#xff0c;全称为Apache HTTP Server&#xff0c;由Apache软件基金会开发和维护。它是目前全球使用最广泛的Web服务器软件之一&#xff0c;占全球所有网络服务器的很大比例。Apache服务器具有跨平台的特性&#xff0c;可以…

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能。然而&#xff0c;对于非AI专家来说&#xff0c;制定高质量的提示来引导 LLMs 是目前AI应用领域的一项重要挑战。现有的提示…

【PyTorch][chapter 22][李宏毅深度学习]【无监督学习][ WGAN]【理论一】

简介&#xff1a; 2014年Ian Goodfellow提出以来&#xff0c;GAN就存在着训练困难、生成器和判别器的loss无法指示训练进程、生成样本缺乏多样性等问题。从那时起&#xff0c;很多论文都在尝试解决&#xff0c;但是效果不尽人意&#xff0c;比如最有名的一个改进DCGAN依靠的是对…

【嵌入式高级C语言】9:万能型链表懒人手册

文章目录 序言单向不循环链表拼图框架搭建 - Necessary功能拼图块1 创建链表头信息结构体 - Necessary2 链表头部插入 - Optional3 链表的遍历 - Optional4 链表的销毁 - Necessary5 链表头信息结构体销毁 - Necessary6 获取链表中节点的个数 - Optional7 链表尾部插入 - Optio…

RFID-科技的“隐秘耳语者”

RFID-科技的“隐秘耳语者” 想象一下&#xff0c;你身处一个光线昏暗的环境中&#xff0c;周围的一切都被厚厚的阴影笼罩。这时&#xff0c;你需要识别并获取一个物体的信息&#xff0c;你会选择怎么做&#xff1f;是点亮灯光&#xff0c;用肉眼仔细观察&#xff0c;还是打开扫…

Haproxy实验搭建

1.yum本地源安装Haproxy [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 [rootlocalhost ~]# yum install haproxy -y2.yum网络源安装Haproxy 关闭防火墙和selinux ###先把安装包拖进来[rootlocalhost ~]# yum install rh-haproxy18-haproxy-1…

Linux操作系统的vim常用命令和vim 键盘图

在vi编辑器的命令模式下&#xff0c;命令的组成格式是&#xff1a;nnc。其中&#xff0c;字符c是命令&#xff0c;nn是整数值&#xff0c;它表示该命令将重复执行nn次&#xff0c;如果不给出重复次数的nn值&#xff0c;则命令将只执行一次。例如&#xff0c;在命令模式下按j键表…

[java基础揉碎]继承

为什么需要继承: > 继承就可以解决代码复用的问题 继承的基本介绍: 继承的使用细节: 1.子类继承了所有的属性和方法&#xff0c;但是私有属性和方法不能在子类直接访问&#xff0c;要通过公共的方法去访问 解决, 提供公共的方法返回: 2.子类必须调用父类的构造器,完成父…

Linux系统——LVS、Nginx、HAproxy区别

目录 一、LVS 1.负载均衡机制 1.1负载均衡——NAT模式 1.2负载均衡——DR模式 1.3负载均衡——隧道模式 1.4负载均衡——总结 2.LVS调度算法 3.LVS优点 4.LVS缺点 二、Nginx 1.传统基于进程或线程的模型 2.Nginx架构设计 3.Nginx负载均衡 4.Nginx调度算法 5.Ngi…

Jmeter 测试使用基本组件结构

JMeter简介 Apache组织开发的开源免费压测工具纯Java程序&#xff0c;跨平台性强源程序可以从网上下载高扩展性可对服务器、网络或对象模拟巨大的负载&#xff0c;进行压力测试可以用于接口测试支持分布式、多节点部署 JMeter安装 下载位置 官网https://jmeter.apache.org/ …

Java中SpringBoot四大核心组件是什么

一、Spring Boot Starter 1.1 Starter的应用示例 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency><groupId>org.mybatis.sprin…

深度学习与人类的智能交互:迈向自然与高效的人机新纪元

引言 随着科技的飞速发展&#xff0c;深度学习作为人工智能领域的一颗璀璨明珠&#xff0c;正日益展现出其在模拟人类认知和感知过程中的强大能力。本文旨在探讨深度学习如何日益逼近人类智能的边界&#xff0c;并通过模拟人类的感知系统&#xff0c;使机器能更深入地理解和解…

高级语言讲义2016计专(仅高级语言部分)

1.斐波那契序列的第n项可以表示成以下形式&#xff0c;编写一个非递归函数&#xff0c;返回该数列的第n项的数值 #include <stdio.h>int func(int n) {if(n1||n2)return 1;int p1,q1,num;for(int i3; i<n; i) {numpq;qp;pnum;}return num; } 2.在MXN的二维数组A中&am…

瑞_23种设计模式_模板方法模式

文章目录 1 模板方法模式&#xff08;Template Pattern&#xff09; ★ 钩子函数1.1 介绍1.2 概述1.3 模板方法模式的结构1.4 模板方法模式的优缺点1.5 模板方法模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;InputStre…

【测试工具系列】压测用Jmeter还是LoadRunner?还是其他?

说起JMeter&#xff0c;估计很多测试人员都耳熟能详。它小巧、开源&#xff0c;还能支持多种协议的接口和性能测试&#xff0c;所以在测试圈儿里很受欢迎&#xff0c;也是测试人员常用的工具&#xff0c;但是在企业级性能场景下可能会有性能瓶颈&#xff0c;更适合测试自己使用…

Grafana二次开发环境搭建

1 Grafana环境搭建 1.1 搭建后端服务 下载windows安装版文件grafana.com 1&#xff09;选择版本号&#xff1a;此处我选的8.3.3版本 2&#xff09;安装完成后&#xff0c;请记住安装目录 &#xff0c;我的是在 D:\software\Gragana833 安装完成后会自动运行, 3&#xff09;此…

2024年软考重大改革

中国计算机技术职业资格网 考试日期 考试级别 考试资格名称 5月25日至28日 高级 系统分析师 系统架构设计师 信息系统项目管理师 中级 软件设计师 网络工程师 软件评测师 电子商务设计师 嵌入式系统设计师 数据库系统工程师 信息系统管理工程师 初级 程序员 …

MySQL之体系结构和基础管理

前言 本文以linux系统的MySQL为例详细介绍MySQL的体系结构&#xff0c;因为在实际生产环境中MySQL的运行环境都是linux系统。同时介绍MySQL的基础管理&#xff0c;包括用户管理和权限管理等。 MySQL体系结构 MySQL客户端/服务器工作模型 MySQL是C/S架构&#xff0c;工作模型…