【Vue3之setup语法糖（二）】

最新推荐文章于 2024-08-25 14:12:47 发布
最新推荐文章于 2024-08-25 14:12:47 发布
阅读量264 收藏 4
点赞数 2
分类专栏： 前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46123285/article/details/136907750
版权
本文介绍了如何在Vite项目中优化setup代码，以及如何通过使用vite-plugin-vue-setup-extend插件，将Vue名的显示和setup代码合并到一个script标签中，简化配置过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

一、setup代码优化

再添加一个script标签里面放setup,不需要写return返回值了。两个script，一个用于显示vue的名，一个用于放setup
在这里插入图片描述

二、只用一个script显示Vue名

需要先安装一个插件npm i vite-plugin-vue-setup-extend -D
打开vite.config.ts文件，引入import VueSetupExtend from 'vite-plugin-vue-setup-extend',插件里追加调用
在这里插入图片描述
在这里插入图片描述

Vue 3 的 setup语法糖到底是什么东西？
qq_36348403的博客
02-26 1299
setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？
vue3 setup语法糖
lhblmd的博客
06-28 719
vue3 setup语法糖
Vue3使用setup-extend简化组件名写法
XunLin233的博客
01-29 1206
如果我们在Vue3中要使用setup的语法糖，就需要使用两个script标签，一个用于设置组件的name属性，一个用于编写setup中的代码。因此我们可以使用插件来进行简化，将name作为script标签的属性来设置组件名。但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。
Vue 3 项目构建与效率提升：vite-plugin-vue-setup-extend 插件应用指南
俎树振的博客
04-17 6550
一、Vue3项目创建； 二、VSCode 工具的智能提示与自动添加 .value； 三、SASS安装 四、Vite 插件 vite-plugin-vue-setup-extend 的应用； 五、VSCode 自定义代码片段的创建与应用
vue3-setup
qq_52135740的博客
08-02 339
setup 理解：Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） 注意点： 尽量不要与Vue2.x配置混用 Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性
Vue3使用vite-plugin-vue-setup-extend 不生效问题
weixin_45441173的博客
02-20 1886
Vue3使用vite-plugin-vue-setup-extend 不生效问题
Vue3.0-setup函数
qq_64067728的博客
09-16 670
第一种是正常的在script中使用setup函数，然后给出数据、方法的返回值就可以使用对应的数据、方法，这种情况下，vue2.0中的生命周期函数，data，methods、计算属性，监听器等都可以正常使用，但是data和setup两个的优先级，setup优先级更高。第二种是在script标签中将setup当成一个属性，这是setup的一种语法糖，添加进去，然后再script中不再需要像setup函数一样需要返回对应数据、方法，组件中所有用到的：数据、方法等等，都要配置在setup中。
vue+vue3 setup语法糖父子传值
cyj0919的博客
03-16 549
使用setup语法糖父向子传值时，如果值是从后台获取的数据，可以加一个v-if判断，有数据时再进行组件的渲染。vue3 setup语法糖不用导入组件直接使用即可，不用注册。这个是自己封装的一子组件在父组件里面引用。
【VUE3】setup语法糖(computed 使用+watch监听)
seimeii的博客
08-02 1万+
setup语法糖（computed使用与watch监听）
在vue3+ts+setup语法糖中使用图片预览组件
09-14
总结，Vue3+ts+setup语法糖提供了强大的开发体验，结合`vue-preview`库，我们可以轻松实现图片预览功能。在实际项目中，还可以进一步优化，例如添加错误处理、图片懒加载等功能，提升用户体验。
vue3的setup的认识
qq_44472790的博客
09-30 589
setup是什么？ 认识setup 1.理解：vue3.0出现中的一个配置 值为一个函数 2.是所有CompositionAPI（组合API）表演舞台 3.组建中所用到的：数据、方法、均要在setup中配置 4.set的函数2种返回值： 1.若返回一个对象，则对想中的属性、方法、在模板中均可以直接使用 2.若返回一个渲染函数：则可以自定义渲染内容 5.注意事项： 1.尽量不与2.X配置混用 vue2中的data methods computed 可以访问setup中的属性、方法 但在setup中不能访
vue3 setup() 高级用法
qq_34082921的博客
11-13 810
从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup 配置项，用它来写组合式API。1、这个函数会在 created 之前执行，上述已解释。2、setup 内部没有 this，不能挂载 this 相关的东西。3、setup 内部的属性和方法，必须 return 暴漏出来，否则没有办法使用。
VUE3【学习三】：setup方法，三个插槽的使用及区别，父子组件传值
weixin_42486438的博客
04-04 5329
setup方法，三个插槽的使用及区别，父子组件传值
Vue3.0学习 - 第三节，Vue3 组合api的理解（setup）
csl125的博客
04-14 1564
写一个todolist，大概长这样 vue2.xx 语法 <template> <div> <from> <input type="text" v-model="stu.id"> <input type="text" v-model="stu.name"> <input type="text" v-model="stu.age"> <input type="sub
VUE3里面 setup() 的常用方法一览
wanmeifengfeng的博客
03-22 5893
比较常用的方法加注视一览，我尽量写简单一点，通熟易懂，举一反三 响应式数据定义 ref、reactive reactive 创建一个响应式对象 <template> {{ state.count }} </template> <script> import { reactive } from 'vue'; export default { setup () { //创建响应式数据 const state = reactive({
vue3中的setup()函数详解
热门推荐
唯见青山不见君
11-29 1万+
vue3中的setup()函数详解
Vue3基础1
qq_53374893的博客
08-25 348
修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式
vue3 extends的使用
蓝色之恋love的博客
11-24 4221
此处使用extends继承element-plus中的elCascader组件，并改写options里的数据。
5个促进Vue3开发更友好的插件
weixin_44727080的博客
03-01 5572
前言： 网上找到几个好用的插件，这里分享一下。 具体插件： 一、setup name 增强 Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。 这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接...
vue3中setup语法糖
最新发布
01-21
#### 二、如何使用Setup语法糖？ 当采用此语法编写组件时，默认情况下所有的声明都是公开可见并可以直接用于模板中的；无需再显式导出任何东西到`setup()`函数返回对象里去。下面是一个简单的例子展示怎样利用这个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值