当前位置: 首页 > news >正文

Vue3.0组合式API:setup()函数

1、什么是组合式API

Vue 3.0 中新增了组合式 API 的功能,它是一组附加的、基于函数的 API,可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此,使用组合式 API 可以将组件代码编写为多个函数,每个函数处理一个特定的功能,不再需要按选项组织代码。

组合式 API 可以更好地和 TypeScript 集成,同时,组合式 API 可以和现有的基于选项的 API 一起使用。需要注意的是,组合式 API 是在选项(data、methods 和 computed)之前进行解析,因此组合式 API 无法访问这些选项中定义的属性。

2、setup()函数的基本用法

setup() 函数是一个新的组件选项,它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前,初始化 Prop 之后调用,而且 setup() 函数是在 beforeCreate 钩子函数之前调用。

setup() 函数可以返回一个对象或函数,对象的属性会合并到组件模板渲染的上下文中。

【实例】创建一个组件,使用 setup() 函数实现一个计数器功能。

<template><div><h3>{{ blogInfo.name }}</h3><h3>{{ blogInfo.url }}</h3><p>计数结果:{{ count }}</p><button @click="counter">计数器</button></div>
</template><script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';export default {setup() {// 使用 ref 创建响应式的基本类型const count = ref(0);// 使用 reactive 创建响应式的复杂类型const blogInfo = reactive({name: '您好,欢迎访问 pan_junbiao的博客',url: 'https://blog.csdn.net/pan_junbiao'});// 挂载时的操作onMounted(() => {console.log('组件已挂载');});// 卸载时的操作onUnmounted(() => {console.log('组件已卸载');});// 增加计数的方法function counter() {count.value++;}// 返回需要在模板中使用的数据和方法return {blogInfo,count,counter};}
};
</script>

执行结果:

上述代码中,setup() 函数返回的是一个对象,在对象有三个属性,其中两个响应式对象,和一个函数。在组件的模板仲可以直接使用这些属性。

注意:

setup() 函数中不能使用 this。但是,当和现有的基于选项的 API 一起使用时,在选项中可以通过 this 访问 setup() 函数返回的实现。

3、setup()函数的参数

setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象,第二个参数是一个上下文(context)对象。

3.1 第一个参数:响应式的 props 对象

第一个参数是响应式的 props 对象,通过该参数可以访问 props 选项中定义的 Prop。

【实例】使用setup()函数中的第一个参数:响应式的 props 对象。

(1)创建 ParentComponent.vue 父组件

<template><fieldset><legend>父组件</legend><h3>使用Prop实现父组件向子组件传递数据</h3><!-- 第三步:使用组件,并向子组件传递数据 --><ChildComponent :blogName="blogInfo.blogName" :blogUrl="blogInfo.blogUrl" /></fieldset>
</template><script>
import { reactive } from 'vue';//第一步:引用组件
import ChildComponent from '@/components/ChildComponent.vue'export default {//第二步:注册组件components: {ChildComponent,},setup() {// 使用 reactive 创建响应式的对象const blogInfo = reactive({blogName: '您好,欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao'});//返回return {blogInfo}}
}
</script>

(2)创建 ChildComponent.vue 子组件

<template><fieldset><legend>子组件</legend><p>博客信息:{{ props.blogName }}</p><p>博客地址:{{ props.blogUrl }}</p></fieldset>
</template><script>
export default {// 使用 props 属性:接收父组件传递过来的数据props: ['blogName', 'blogUrl'],//setup()函数的第一个参数是响应式的 props 对象。setup(props) {return {props};}
}
</script><style scoped>
fieldset {font-size: 18px;color: blue;
}
</style>

(3)在 App.vue 根组件中,引入父组件

<template><!-- 第三步:使用组件 --><ParentComponent />
</template><script>
//第一步:引用组件
import ParentComponent from '@/components/ParentComponent.vue'export default {//第二步:注册组件components: {ParentComponent,}
}
</script>

执行结果:

3.2 第二个参数:上下文(context)对象

第二个参数是一个上下文(context)对象,该对象是一个 JavaScript 对象,它暴露了 attrs、slots 和 emit 三个属性。其中,attrs 和 slots 是有状态的对象,它们会随着组件的更新而发生变化,但是这两个对象本身并不是响应式的,因此不能对它们进行解构。

【实例】使用setup()函数中的第二个参数:上下文(context)对象。

export default {//setup()函数的第一个参数:响应式的 props 对象。//setup()函数的第二个参数:上下文(context)对象setup(props, context) {//属性(非响应式对象)console.log('属性:', context.attrs);//插槽(非响应式对象)console.log('插槽:', context.slots);//发生的事件(方法)console.log('事件:', context.emit);}
}

4、使用 <script setup> 语法糖

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无需 return,template 便可直接使用。相比于普通的 <script> 语法,它具有更多优势:

  • 更少的样板内容,更简洁的代码。
  • 能够使用纯 TypeScript 声明 props 和自定义事件。
  • 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
  • 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

【实例】使用 <script setup> 语法糖,重构上述的计数器功能。

<template><div><h3>{{ blogInfo.name }}</h3><h3>{{ blogInfo.url }}</h3><p>计数结果:{{ count }}</p><button @click="counter">计数器</button></div>
</template><!-- 使用 <script setup> 语法糖 -->
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';// 使用 ref 创建响应式的基本类型
const count = ref(0);// 使用 reactive 创建响应式的复杂类型
const blogInfo = reactive({name: '您好,欢迎访问 pan_junbiao的博客',url: 'https://blog.csdn.net/pan_junbiao'
});// 挂载时的操作
onMounted(() => {console.log('组件已挂载');
});// 卸载时的操作
onUnmounted(() => {console.log('组件已卸载');
});// 增加计数的方法
function counter() {count.value++;
}</script>

执行结果:

相关文章:

Vue3.0组合式API:setup()函数

1、什么是组合式API Vue 3.0 中新增了组合式 API 的功能&#xff0c;它是一组附加的、基于函数的 API&#xff0c;可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此&#xff0c;使用组合式 API 可以将组件代码编写为多个函…...

利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(三)

简介 随着生成式人工智能的兴起&#xff0c;传统的 BI 报表功能已经无法满足用户对于自动化和智能化的需求&#xff0c;今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器 – Quicksight&#xff0c;利用生成式AI的能力来加速业务决策&#xff0c;从而提高业务生产力。…...

2022高教社杯全国大学生数学建模竞赛C题 问题一(1) Python代码演示

目录 问题 11.1 对这些玻璃文物的表面风化与其玻璃类型、纹饰和颜色的关系进行分析数据探索 -- 单个分类变量的绘图树形图条形图扇形图雷达图Cramer’s V 相关分析统计检验列联表分析卡方检验Fisher检验绘图堆积条形图分组条形图分类模型Logistic回归随机森林import matplotlib…...

Qt QSerialPort数据发送和接收DataComm

文章目录 Qt QSerialPort数据发送和接收DataComm2.添加 Qt Serial Port 模块3.实例源码 Qt QSerialPort数据发送和接收DataComm Qt 框架的Qt Serial Port 模块提供了访问串口的基本功能&#xff0c;包括串口通信参数配置和数据读写&#xff0c;使用 Qt Serial Port 模块就可以…...

macOS上谷歌浏览器的十大隐藏功能

谷歌浏览器&#xff08;Google Chrome&#xff09;在macOS上拥有一系列强大而隐蔽的特性&#xff0c;这些功能能显著提高您的浏览体验。从多设备同步到提升安全性和效率&#xff0c;这些被低估的功能等待着被发掘。我们将逐步探索这些功能&#xff0c;帮助您最大化利用谷歌浏览…...

【C++篇】C++类与对象深度解析(二):类的默认成员函数详解

文章目录 【C篇】C类与对象深度解析&#xff08;二&#xff09;前言1. 类的默认成员函数2. 构造函数2.1 函数名与类名相同2.2 无返回值2.3 对象实例化时系统会自动调用2.4 构造函数可以重载2.5 默认构造函数的生成规则2.6 无参构造函数与全缺省构造函数的关系2.7 内置类型与自定…...

Linux2-mkdir,touch,cat,more

1.相对路径和绝对路径 cd用于切换目录&#xff0c;对于路径可以用相对路径和绝对路径 例如&#xff1a;cd /home/user/public和cd public效果一样&#xff0c;都是将目录切换到HOME文件夹下的public文件夹 2.特殊路径符 .表示当前目录 ..表示上级目录 ~表示HOME目录 3.m…...

AI 时代程序员的应变之道

一、AI 浪潮来袭&#xff0c;编程界风云变幻 随着 AIGC 大语言模型如 ChatGPT、Midjourney、Claude 等的涌现&#xff0c;AI 辅助编程工具日益普及&#xff0c;程序员的工作方式正经历着深刻的变革。 分析公司 OReilly 日前发布的《2023 Generative AI in the Enterprise》报告…...

SQL编程题复习(24/9/16)

练习题 x40 10-74 获取商品表中商品名称含有“pad”的商品10-75 获取指定商品的商品分类名称&#xff08;多表查询&#xff09;10-76 为sh_goods表添加一行记录10-77 检索出sh_goods表中每项keyword对应的商品数量&#xff0c;查询结果显示字段依据输出样例设置10-78 查询sh_go…...

运维工程师面试整理-操作系统

在运维工程师的面试中,操作系统相关的知识通常是重中之重,尤其是Linux/Unix系统。以下是针对操作系统部分的一些详细内容,帮助你更好地准备面试。 1. Linux/Unix 基础 ● 常用命令 ○ 文件和目录管理:ls, cd, cp, mv, rm, mkdir, rmdir, find, grep, awk, sed...

Linux搭建邮箱服务器(简易版)

本章是上一文档的简易版本搭建方式更为快速简洁&#xff08;只需要两条命令即可搭建&#xff09;&#xff0c;如果想了解更详细一些可以看我上一文档 Linux接发邮件mailx_linux mailx o365-CSDN博客文章浏览阅读857次&#xff0c;点赞25次&#xff0c;收藏19次。本文详细描述了…...

基于SSM的社区爱心捐赠管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSSMVueMySQL的社区爱…...

鸿蒙next web组件和h5 交互实战来了

前言导读 鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间&#xff0c;周末把代码研究的差不多了&#xff0c;所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助&#xff0c;废话不多说我们正式开始。 效果图 默认页面 上面H5 下面ArkU…...

甘特图介绍

甘特图&#xff08;Gantt chart&#xff09;是一种常用于项目管理和计划安排的图表类型&#xff0c;它以图形的方式展示项目的任务、活动或工作流的时间线。甘特图得名于它的发明者亨利劳伦斯甘特&#xff08;Henry Laurence Gantt&#xff09;&#xff0c;他在20世纪初开发了这…...

第十一章 【后端】商品分类管理微服务(11.1)——创建父工程

第十一章 【后端】商品分类管理微服务 11.1 创建父工程 项目名称:EasyTradeManagerSystem:Easy 表示简单易用,Trade 表示交易,Manager 表示管理,System 表示系统,强调系统在商品交易管理方面的便捷性,简称 etms。 新建工程 yumi-etms yumi-etms 作为所有模块的父工程,…...

c语言中的“二级指针”与“指针数组”

二级指针 int main() { int a10; int *pa&a; //pa是一级指针 int **ppa&pa; //ppa就是二级指针变量 *说明ppa是指针变量。ppa指向pa的类型是int* rerurn 0; } 二级指针就是用来存放一级指针变量的地址。 *ppa其实访问的就是pa。**ppa其实也就是*pa…...

IDA f5 无法生成伪代码 too big function 的原因之一以及解决方法

IDA 提示 0x00xxxxx: too big function 其中可能的原因可能是因为 c的异常 try catch 导致函数跳转太远导致的 找到地址 B64778 在 jmp ___CxxFrameHandler3上按 “e” 将函数的结尾定在这里 然后再按 f5 函数就已经成功生成了...

OpenCV-上下采样

文章目录 一&#xff0c;简介二、下采样&#xff08;Downsampling&#xff09;三、上采样&#xff08;Upsampling&#xff09;四、代码实现1.图像读取2.下采样3.上采样4.拉普拉斯金字塔 五、应用 一&#xff0c;简介 高斯金字塔是图像处理、计算机视觉和信号处理中常用的一项技…...

pip install、yum install和conda install三者技术区分

pip install、yum install和conda install在安装系统环境时可以从以下几个方面进行区分选择&#xff1a; 一、适用范围 pip install 主要用于安装 Python 包。适用于 Python 项目中特定的库和工具的安装。如果你的项目是纯 Python 开发&#xff0c;并且需要安装各种 Python 库&…...

【C++指南】作用域限定符 :: 使用详解

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 引言 1. 访问全局变量 2. 命名空间中的成员访问 3. 类的静态成员访问 4. 嵌套命名空间/类中的…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...