vue3：4、组合式API-拉开序幕的setup

已于 2024-01-30 15:58:37 修改
阅读量171 收藏
点赞数
分类专栏： vue3 文章标签： javascript vue.js 开发语言
于 2023-09-07 10:56:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/132733186
版权

stepup概述

setup是vue3中一个新的配置项，值是一个函数，它是Compsition Api  "表演的舞台"，组件中所用到的：数据、方法、计算属性、监视...等等，均配置在setup中。

特点如下：

  • setup函数返回的对象中的内容，可直接在模板中使用
  • setup中访问this是undefined（vue3已经开始弱化this了）
  • setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

 

 setup每次都要return，好麻烦。怎么解决？

 使用 <script setup> 语法糖（底层帮你return了）

写法如下 

有蝉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器
04-29
Vue TypeScript管理模拟服务器 项目的模拟服务器演示链接（由vue-typecript-admin-template使用）概述此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。 唯一的手动更改...
vue3组合式API - 尚硅谷
xiaoququ的博客
11-01 2110
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
八、【Vue3】——组合式API（Composition API）
yifei1234567的博客
04-06 2601
Vue3中逻辑编码主要靠各种组合式API来实现的，这片主要列出编程中会经常使用到的API并进行分析，当然一些主要的API在以往章节详细介绍过的，可通过链接去学习。
vue3组合式Composition API之setup函数的具体用法
南北极之间
06-12 738
vue3组合式Composition API之setup函数的具体用法 vue3拉开序幕的setup 理解：Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） 注意点： 尽量不要与Vue2.x配置混用
Vue3 组合式API（setup、ref、reactive、computed、watch、hook、shallow、provide ）详解
共勉
03-24 689
Vue3中的自定义hook是通过使用函数式组件和Composition API实现的。自定义hook可以将重复的逻辑提取出来，使代码更加简洁和易于维护。要创建一个自定义hook，可以定义一个函数，该函数接受参数并返回一个对象或数组，该对象或数组可供组件使用。
vue-setup-mixins：vue-setup-mixins
02-15
Practice_s19-s20项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue-dischi：Esercizio Vue-API-音乐音乐
02-09
Vue-Dischi
vue-admin:vue后台管理模板-轻量版（已更新vue3.x版本）
04-04
vue-router用户权限vue-router管理 svg-icon组件配置 http-请求功能模块配置，这里我使用的是根据个人习惯用原生写的ajax （），可根据自己喜好可以扩展axios这类型第三方库。 状态管理这里我没有使用vuex ，而是...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 640
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 735
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 24
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 878
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1204
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 207
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 182
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 402
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1454
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
vue3组合式 api使用v-for
04-03
在Vue3中，组合式API可以与v-for指令一起使用，以动态生成组件、列表和其他内容。 首先，我们需要在组件中导入`reactive`和`computed`函数。然后，我们可以使用`reactive`创建一个响应式状态对象，并在`computed`函数中使用它来生成动态内容。最后，我们可以使用v-for指令将内容渲染为列表。 以下是一个使用组合式API和v-for指令的简单示例： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </ul> </div> </template> <script> import { reactive, computed } from 'vue'; export default { setup() { const state = reactive({ items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, ], }); const filteredItems = computed(() => { return state.items.filter((item) => { return item.text.includes('2'); }); }); return { items: filteredItems, }; }, }; </script> ``` 在上面的示例中，我们使用`reactive`创建一个响应式状态对象`state`，其中包含一个名为`items`的数组。然后，我们使用`computed`函数创建一个名为`filteredItems`的计算属性，该属性根据特定条件过滤`items`数组中的元素。 最后，我们将`filteredItems`作为组件的输出，然后在模板中使用v-for指令将其渲染为一个列表。在此示例中，我们只渲染了包含数字2的项目。 请注意，由于组合式API使用`setup`函数而不是传统的`data`和`computed`选项，因此我们需要使用不同的语法来定义状态和计算属性。同时，我们也需要使用不同的方式将它们暴露给模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值