深入理解 Vue3 中的 setup 函数

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋OptionsAPI 与 CompositionAPI
    • 🍋对比
  • 🍋介绍
  • 🍋setup 的返回值
  • 🍋Setup语法糖
    • 🍋完整代码如下
  • 🍋总结

🍋OptionsAPI 与 CompositionAPI

Options API

Options API 是 Vue.js 2.x 中使用的传统组件设计模式。它基于选项对象,将组件的数据、计算属性、方法、生命周期钩子等功能按照选项的形式进行组织。Options API 的特点包括:

易于上手:Options API 的结构清晰,容易理解和学习,适合初学者入门。
逻辑分离:不同功能的代码被分离到不同的选项中,使得代码更易维护和阅读。
依赖注入:通过 this 上下文可以方便地访问到组件的属性和方法。

Composition API

Composition API 是 Vue.js 3.x 中引入的新特性,旨在解决 Options API 在复杂组件中难以维护的问题。Composition API 允许将组件的逻辑按照功能相关性进行组织,而不是按照选项分散组织。Composition API 的特点包括:

逻辑复用:可以将逻辑抽取为可复用的函数,更方便地在不同组件之间共享逻辑。
代码组织:将相关逻辑放在一起,使得组件更加清晰和易于维护。
更好的类型推断:由于函数可以提供更多信息,TypeScript 在使用 Composition API 时能够提供更好的类型推断。

🍋对比

Options类型的 API,数据、方法、计算属性等,集中在:datamethodscomputed中的,若想改动一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

Composition 可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

上面我将两种形式的API都列出来了,总的来说OptionsAPI属于Vue2,CompositionAPI属于Vue3,本文主要结合两者进行介绍

🍋介绍

在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑。setup 函数的引入使得组件的逻辑更加清晰和灵活,本文将主要介绍Setup的基本用法和少量原理

  • 更灵活的组织逻辑:setup 函数可以将相关逻辑按照功能进行组织,使得组件更加清晰和易于维护。不再受到 Options API 中选项的限制,可以更自由地组织代码。

  • 逻辑复用:可以将逻辑抽取为可复用的函数,并在 setup 函数中进行调用,实现逻辑的复用,避免了在 Options API 中通过 mixins 或混入对象实现逻辑复用时可能出现的问题。

  • 更好的类型推断:由于 setup 函数本身是一个普通的 JavaScript 函数,可以更好地与 TypeScript 配合,提供更好的类型推断和代码提示。

  • 更好的响应式处理:setup 函数中可以使用 ref、reactive 等函数创建响应式数据,可以更方便地处理组件的状态,实现数据的动态更新。

  • 更细粒度的生命周期钩子:setup 函数中可以使用 onMounted、onUpdated、onUnmounted 等函数注册组件的生命周期钩子,可以更细粒度地控制组件的生命周期行为。

  • 更好的代码组织:setup 函数将组件的逻辑集中在一个地方,使得代码更易读、易维护,并且可以更清晰地看到组件的整体逻辑。

上述特点有些暂时用不到,本节主要介绍下面三个特点

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。
    在这里插入图片描述
    从下面的图就可以看出Setup的执行要更优先,以及this的不适用
    在这里插入图片描述
<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div></template><script lang="ts">export default {name:'Person',setup(){console.log('~',this) let name = '花卷' //非响应式let age = 22  //非响应式let tel = '12435143545'  //非响应式// 方法function changeName() {name = '馒头' console.log(name) }function changeAge() {age += 1 console.log(age) }function showTel() {alert(tel)}// 将数据、方法交出去return {name,age,tel,changeName,changeAge,showTel}}}</script>

🍋setup 的返回值

  • 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用**(重点关注)。**

在这里插入图片描述

  • 若返回一个函数:则可以自定义渲染内容,代码如下:
setup(){return ()=> '你好啊!'
}

🍋Setup语法糖

大家十分清楚语法糖到哪都是为了使代码更简便

接下来我介绍一下语法糖的写法

<script setup>
</script>

它可以自动返回,无需return返回,我们测试一下,首先在模版把a写上

在这里插入图片描述
然后再script里面写,这里的let a = 111,就自带返回了,我们接下来看看页面

<script setup>let a = 111
</script>

很不幸,报错了,我们读一下报错内容,两个标签必须采用相同类型,那么我们统一就好
在这里插入图片描述
在这里插入图片描述

<script lang="ts" setup>let a = 111
</script>

这样结果就出来了
在这里插入图片描述

我们如果想要修改下面的名字,除了重命名文件(大部分情况不采用),可以采用一个插件
在这里插入图片描述
我们可以借助vite中的插件简化

  1. 第一步控制台运行:npm i vite-plugin-vue-setup-extend -D
  2. 第二步:vite.config.ts
    在这里插入图片描述

🍋完整代码如下

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts" setup name="Person">  //自定义命名// 此时的name、age、tel都不是响应式的数据let name = '张三'let age = 22let tel = '1424423451'let address = '北京市朝阳区'// 方法function changeName() {name = '' console.log(name) }function changeAge() {age += 1 console.log(age)}function showTel() {alert(tel)}
</script>

🍋总结

一开始介绍了Vue2,3对应的两种API以及对比,之后简单介绍了一下Vue3特有的函数—Setup,最后围绕Setup介绍使用语法糖后,可以省略 export default 和 setup 属性,使得组件的代码更加简洁和易读。同时,Vue 3 也会将 参数地注入到 setup 函数中,使得在使用这些参数时不需要显式地声明。

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

搞不明白这4类车,别去自驾游

文 | AUTO芯球 作者 | 太2 春天要来了 又可以去浪了 喜欢自驾的朋友憋不住了吧&#xff0c; 鄙人不才全国各地走过&#xff0c;各种车型也大致开过。 那么根据我这几年的自驾经历 来跟大家聊一聊我觉得比较方便好用的自驾车。 第一类&#xff0c;城市SUV 宝马X&#xff…

vue框架-vue-cli

vue-cli Vue CLI是一个官方的脚手架工具,用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架,可以帮助开发人员快速构建现代化的Web应用程序。 Vue CLI通过提供预先配置好的Webpack模板和插件,使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建…

【Docker】docker安装

需要云服务器等云产品来学习Linux可以移步/-->腾讯云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Ubuntu安装docker 1、查看操作系统和CPU架构 2、卸载docker 3、配置docker下载源 4、安装docker 5、解决报错…

【STM32 物联网】AT指令与TCP,发送与接收数据

文章目录 前言一、连接TCP服务器1.1 配置Wifi模式1.2 连接路由器1.3 查询ESP8266设备IP地址1.4 连接TCP服务器 二、向服务器接收数据和发送数据2.1 发送数据2.2 接收数据 总结 前言 随着物联网&#xff08;IoT&#xff09;技术的迅速发展&#xff0c;越来越多的设备和系统开始…

【开源】C++ 周期任务调度的思想和实现

​ 今天调休&#xff0c;抓住年假的最后一天&#xff0c;将构思多日适合将并行任务串行执行的框架实现出来。 核心思想&#xff1a; 将各个独立的功能模块作为周期性的任务。在主循环集中调度所有任务&#xff0c;让各个功能模块依次有处理事项的机会。如果处理事项较为耗时&…

BES 平台 SDK之串口指令

本文章是基于BES2700 芯片&#xff0c;其他BESxxx 芯片可做参考&#xff0c;如有不当之处&#xff0c;欢迎评论区留言指出。仅供参考学习用&#xff01; 上位机下发格式&#xff1a; 格式一&#xff1a;[A,B] 格式二&#xff1a;A:B 固定格式&#xff1a;auto_test&#xff1a…

政安晨:【完全零基础】认知人工智能(二)【超级简单】的【机器学习神经网络】—— 底层算法

如果小伙伴第一次看到这篇文章&#xff0c;可以先浏览一下我这个系列的上一篇文章&#xff1a; 政安晨&#xff1a;【完全零基础】认知人工智能&#xff08;一&#xff09;【超级简单】的【机器学习神经网络】 —— 预测机https://blog.csdn.net/snowdenkeke/article/details/…

阿里云服务器CPU内存配置怎么选择够用?

阿里云服务器配置怎么选择&#xff1f;根据实际使用场景选择&#xff0c;个人搭建网站可选2核2G配置&#xff0c;访问量大的话可以选择2核4G配置&#xff0c;企业部署Java、Python等开发环境可以选择2核8G配置&#xff0c;企业数据库、Web应用或APP可以选择4核8G配置或4核16G配…

技能下载中:Sora视频让机器人秒学任何技艺!

引言 在机器人成为平凡工匠和前沿先驱的时代&#xff0c;我们正站在新黎明的边缘。本文将探讨斯坦福大学的通用操作接口&#xff08;UMI&#xff09;及其与OpenAI的Sora如何共同推进机器人技术&#xff0c;开创未来学习的新纪元。 正文 斯坦福的通用操作接口&#xff08;UMI…

WildCard:一个因太好用而被迫暂停服务的虚拟信用卡平台,魅力何在?

如果你需要使用Wildcard开通GPT4、Midjourney或是Only方式的话&#xff0c;请点击&#xff1a;WildCard使用教程 参考文章链接&#xff1a;WildCard&#xff1a;一个因太好用而被迫暂停服务的虚拟信用卡平台&#xff0c;魅力何在&#xff1f; 1、Wildcard用户数量激增&#x…

Vite之对CSS的处理方式及使用

Vite之对CSS的处理方式及使用 文章目录 Vite之对CSS的处理方式及使用1. 直接对CSS处理2. 使用css预处理器less 1. 直接对CSS处理 可直接导入css进行使用&#xff0c;而不需要任何配置 定义样式文件&#xff1a;myStyle.css body {background-clor:red }导入css文件 import …

Windows 编译 yangfengzzz/fluid-engine-OpenVDB

我想将 OpenVDB 接入 doyubkim 的流体引擎 https://github.com/doyubkim/fluid-engine-dev 然后搜到已经有人做过这件事了 https://github.com/yangfengzzz/fluid-engine-OpenVDB Windows 编译 yangfengzzz/fluid-engine-OpenVDB 但是我是 windows&#xff0c;所以想要编译…

ubuntu22.04-cmake-添加动态库-静态库-添加头文件夹所在位置-管理员启动

文章目录 1.引用库命令-target_link_libraries2.命令行添加头文件夹和库文件夹所在位置3.添加头文件目录-include_directories4.target_include_directories5.生成库-add_library6.静态库-共享库7.管理员任务管理器1.引用库命令-target_link_libraries 作用 指定链接给定目标和…

MySQL系列之索引入门(下)

前言 通过上文&#xff0c;我想各位盆友已熟悉MySQL的索引分类及其含义&#xff0c;那么如何合理的使用呢&#xff1f; 请继续围观此文&#xff0c;一探究竟&#xff01; 一、创建索引 首先&#xff0c;我们一起学习索引是如何创建的&#xff0c;又有哪些方式。 1. create t…

VO、DTO、DO、BO、PO

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 VO、DTO、DO、BO1.概念阿里Java开发手册分层领域模型&#xff1a; 2. VO 和 DTO 使用场景以下是一个使用VO和DTO的典型案例&#xff1a; 3.BO和DTO的区别 案例 VO、…

259.【华为OD机试真题】特殊的加密算法(深度优先搜索(DFS)-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-特殊的加密算法二.解题思路三.题解代码Python题…

js-后端返回参数前端动态切换组件样式

1.js枚举 // 枚举-js //对应的icon显示 EnumUtil.Type { COMMON: 1, BUY: 2, PRODUCE: 3} 2.动态公共样式组件 <!-- 公共组件-显示对应icon --> <template><div v-html"TaskIcon(statues)" class"pro_set_task"></div> </t…

数据结构1.0(基础)

近java的介绍&#xff0c; 文章目录 第一章、数据结构1、数据结构 &#xff1f;2、常用的数据结构数据结构&#xff1f; 逻辑结构and物理结构 第二章、数据结构基本介绍2.1、数组&#xff08;Array&#xff09;2.2、堆栈&#xff08;Stack&#xff09;2.3、队列&#xff08;Que…

GET 和 POST 的区别?

get 参数通过 url 传递&#xff0c;post 放在 request body 中。 get 请求在 url 中传递的参数是有长度限制的&#xff0c;而 post 没有。 get 比 post 更不安全&#xff0c;因为参数直接暴露在 url 中&#xff0c;所以不能用来传递敏感信息。 get 请求只能进行 url 编码&am…

宝塔安装MySQL、设置MySQL密码、设置navicat连接

1、登录宝塔面板进行安装 2、设置MySQL连接密码 3、安装好了设置navicat连接 登录MySQL [roothecs-394544 ~]# mysql -uroot -p Enter password: 切换到MySQL数据 mysql> use mysql Database changed mysql> 查询用户信息 mysql> select host,user from user; ---…