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>

执行结果:

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

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

相关文章

CPU 和 GPU:为什么GPU更适合深度学习?

目录 什么是 CPU &#xff1f; 什么是 GPU &#xff1f; GPU vs CPU 差异性对比分析 GPU 是如何工作的 &#xff1f; GPU 与 CPU 是如何协同工作的 &#xff1f; GPU vs CPU 类型解析 GPU 应用于深度学习 什么是 CPU &#xff1f; CPU&#xff08;中央处理器&#xff09;…

git push : RPC failed; HTTP 400 curl 22 The requested URL returned error: 400

git push 出现RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 问题 git push Enumerating objects: 11, done. Counting objects: 100% (11/11), done. Delta compression using up to 8 threads Compressing objects: 100% (10/10), done. error: RPC …

对中文进行文本分类的常用方法

一&#xff1a;关键词分类和基于规则的分类 关键词分类和基于规则的分类是两种常见的文本分类方法&#xff0c;它们可以应用于中文文本的分类。下面我将详细介绍这两种方法&#xff1a; 关键词分类 原理&#xff1a;这种方法通过识别文本中出现的特定关键词或短语来确定文本的…

STM32常用数据采集滤波算法

例如&#xff0c;STM32进行滤波处理时&#xff0c;主要目的是处理数据采集过程中可能产生的噪声和尖刺信号。这些噪声可能来自电源干扰、传感器自身的不稳定性或其他外部因素。 1.一阶互补滤波 方法&#xff1a;取a0~1,本次滤波结果&#xff08;1-a&#xff09;本次采样值a上…

基于 jenkins 的持续集成、持续部署方案

工具介绍 python3.12 fastapi 0.92.0 uvicorn 开发部署web项目&#xff1b;git gitee 实现代码版本管理&#xff1b;jenkins docker 实现持续集成、持续部署&#xff1b;centos7 作为jenkins服务器 & 部署服务器&#xff1b;有条件的可以再启动一台服务器作为部署测试…

学习笔记(一)

前言 一、对象 1、由类建模而成&#xff0c;是消息、数据和行为的组合 2、可以接收和发送消息&#xff0c;并利用消息进行彼此的交互。消息要包含传送给对象接收的信息 3、类的实例化&#xff1a;把类转换为对象的过程叫类的实例化。 4、对象的特性 (1) 对象有状态&#…

RabbitMQ Spring客户端使用

注解声明式队列和交换机 java自带序列化工具类&#xff0c;将java对象序列化为字节数组&#xff0c;用于网络传输。 jdk序列号存在缺陷&#xff0c;&#xff08;不安全&#xff0c;占用空间大等&#xff09; 推荐使用JSON的序列化&#xff1a; springboot扫描包使配置生效&…

windows下自启springboot项目(jar+nginx)

1、将springboot项目打包为jar 2、新建文本文档 test.txt&#xff0c;并输入 java -jar D:\test\test.jar&#xff08;修改为自己的jar包位置&#xff09; 保存 然后修将后缀名改为 .bat 3、在同一目录再新建 文本文档test.txt&#xff0c;输入以下内容&#xff0c;&…

图数据库的力量:深入理解与应用 Neo4j

图数据库的力量&#xff1a;深入理解与应用 Neo4j 文章目录 图数据库的力量&#xff1a;深入理解与应用 Neo4j1、什么是 Neo4j&#xff1f;版本说明 2、Neo4j 的部署和安装Neo4j Web 工具介绍 3、体验 Neo4j加载数据查询数据数据结构 4、Cypher 入门创建数据查询数据关系深度查…

【数据结构篇】~排序(1)之插入排序

排序~插入排序 前言插入排序1.直接插入排序&#xff08;时间复杂度&#xff1a;O(N^2)&#xff09;1.思想2.代码 2.希尔排序(时间复杂度&#xff1a;O(N∙))1.思路简易证明希尔排序的复杂度 2.代码 前言 四大排序&#xff0c;今天解决插入排序 堆排序和冒泡排序已经写过了&am…

从安装ffmpeg开始,把一个视频按照每秒30帧fps剪切为图片

ffmpeg -i demo.mp4 -vf fps1 -start_number 0 %5d.jpg没有ffmpeg 的去官网下载&#xff0c; ffmpeg.org/download.html 下载好之后&#xff0c;解压进入bin文件夹 复制当前路径&#xff0c;下一步 配置环境 进入本机环境变量&#xff0c;把地址添加到path中 之后进入anacond…

IO模型---BIO、NIO、IO多路复用、AIO详解

本篇将想给详细解释一下什么是BIO、NIO、IO多路复用以及AIO~ 同步的阻塞(BIO)和非阻塞(NIO)的区别 BIO&#xff1a;线程发来IO请求后&#xff0c;一直阻塞着IO线程&#xff0c;需要缓冲区这边数据准备好之后&#xff0c;才会进行下一步的操作。 举个&#x1f330;&#xff1…

Golang协程泄漏定位和排查

Golang协程泄漏定位和排查 1 场景&#xff1a;无缓冲channel写阻塞2 排查和定位思路2.1 Golang pprof2.2 协程数监控2.3 操作系统内存泄漏 参考 1 场景&#xff1a;无缓冲channel写阻塞 package mainimport ("log""net/http"_ "net/http/pprof"…

苍穹外卖 修改nginx的端口后websocket连接失败解决

苍穹外卖 修改nginx的端口后websocket连接失败解决 问题&#xff1a; 后端配置好websocket后前端仍显示如图所示的错误 解决&#xff1a; 先用websocket在线工具测试后端是否能正常连接&#xff08;这个基本上不会出现问题&#xff09;用f12观察前端发送的请求 正常来说这个请…

cJSON-轻量级解析模块、字符串的神——编织STM32C8T6与阿里云信息传递的纽带

编写方向&#xff1a;本人就不泛泛的编写一篇什么一文学会cJSON了&#xff0c;没什么突出点&#xff0c;也就我水水字数&#xff0c;你们看来看去也不懂&#xff0c;本人是从上阿里云传信息接触的cJSON的&#xff0c;我就此写一篇针对性的文章&#xff0c;希望对大家有用&#…

【小鹏汽车用户平台-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

图解Self-Attention和代码实现,大语言模型基础思维导图

文章目录 1 Self-Attention的概念注意优缺点 2 Self-Attention的原理Q,K,V, and Self-Attention计算公式代码实现 Self-Attention的计算细节输入是如何Embedding的&#xff1f;Word EmbeddingsSentence EmbeddingsPre-trained Embeddings SelfAttention是如何计算的计算图 4 Se…

线性代数(宋浩版)(4)

2.4逆矩阵 &#xff08;不要把矩阵放在分母上&#xff09; 方阵的行列式 性质1 性质2 性质3 伴随矩阵&#xff08;只有方阵才有&#xff09; 1.求出所有元素的代数余子式&#xff08;矩阵先求行列式&#xff09;。 2.按行求的代数余子式按列放。 定理1&#xff08;重要&…

java中Class文件的文件格式

无关性的基石 计算机底层只能识别二进制&#xff0c;由CPU直接处理二进制&#xff0c;在底层上面是操作系统&#xff0c;在操作系统上面就是虚拟机&#xff0c;java有一个口号&#xff0c;“一次编写&#xff0c;到处运行”这个不太可能在操作系统层面上实现&#xff0c;不同的…

三重因素,巨人瘦身——从 IBM中国研发部裁员讲起

如何看待IBM中国研发部裁员&#xff1f;近日&#xff0c;IBM中国宣布撤出在华两大研发中心&#xff0c;引发了IT行业对于跨国公司在华研发战略的广泛讨论。这一决定不仅影响了众多IT从业者的职业发展&#xff0c;也让人思考全球化背景下中国IT产业的竞争力和未来发展方向。面对…