Vine: 一种全新定义 Vue 函数式组件的解决方案

7月6日的 vue confg 大会上 ShenQingchuan 大佬介绍了他的 Vue Vine 项目, 一种全新定义 Vue 函数式组件的解决方案。 和 React 的函数式组件有异曲同工之妙,写起来直接起飞了。

让我们来快速体验一下 vine, 看看到底给我们带来了哪些惊喜吧。

前置准备

  1. 安装开发依赖
pnpm i -D vue-vine
  1. vite.config.ts 中导入插件:

  1. 安装 vscode 高亮插件

  1. 引入 macro 类型

在使用宏时获得智能提示

注意⚠️: vue-vin 目前只用于 vue3 和 typescript的项目中。

其他的 vue版本或javascript项目可能无法获取完整的功能

定义一个组件

Vine 使用 .vine.ts 结尾的后缀定义一个 Vine 组件(官方称其为 VCF组件,类似 Vue 的 SFC),组件定义的方式很简单就是一个 vine 的模板字符串函数, 具体的组件内容就定义的模板字符串中。

我们可以先看一个基础的组件定义:

模板字符串中不能直接使用 ${} 语法,因为 Vine 会把模板字符串专递给 @vue/compiler-dom 进行编译

从上面的示例可以看出,现在一个文件中可以定义多个 vue 组件。这种代码组织方式可以让我们在一个组件中可以更好地在一个文件中将一些小部件组件进行拆分,既拆分了组件,拆分出来的小组件还能继续保持上下文的变量访问。这下真的变 React 了。

通过工具我们可以看出 vue-vine-plugin 插件最终还是会把这个模板字符串转换成 vue 组件的。

Vine 中的 setup

Vine 会把除返回语句外的函数体部分都定义在 setup 中,相当于 script setup 了

Vine Props

两种定义的方式,第一种是为函数的第一个形参提供 TypeScript 类型注解,另一种是使用 vineProp 宏。

Props 用类型注解声明

这个注解声明 props, 简单方便多了

Props 使用 vineProp 声明

  • vineProp 的第一个参数是 prop 的验证器,它是可选的
  • 必须要指定prop 的类型
  • vineProp.withDefault 可以为 prop 指定默认值,第一个参数是指定的默认值,第二个参数是 prop 的验证器

Vine 宏

Vine 定义了很多宏,我们可以来一起看看

vineEmits

为组件定义 emits,用法与官方版本基本一致。

vineExpose

这个宏的使用方法与官方 defineExpose 宏完全一致。

vineSlots

这个宏的使用方法与官方 defineSlots 宏完全一致。

vineOptions

此宏仅支持您定义 2 个重要的 Vue 组件选项:name 和 inheritAttrs。

vineStyle

这是一个用于定义样式的宏,替代了 SFC 的 style 块。如果您的组件需要 scoped,可以使用 vineStyle.scoped。

在 VCF 外部不允许调用 vineStyle,在一个 VCF 中不允许调用多次。

小结

如果这篇文章对你有帮助,欢迎点赞、关注、转发!

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

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

相关文章

释放计算潜能:Mojo模型与分布式训练的融合之道

释放计算潜能:Mojo模型与分布式训练的融合之道 在当今数据驱动的世界中,机器学习模型常常需要处理庞大的数据集,并且模型的复杂性也在不断增加。这导致训练模型所需的计算资源和时间显著增长。分布式训练作为一种有效的解决方案,…

[Python]配置邮件服务,发送邮件

本文以163邮件系统为例,登录之后,点击设置,开启如下设置项。 即可使用代码发送邮件,并携带附件。 开启SMTP 普通邮件 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart# 1…

文心一言常用的指令

文心一言作为一款强大的人工智能模型,支持多种类型的指令,以满足用户的不同需求。以下是一些文心一言常用的指令类型及其具体示例,这些指令按照不同的功能和用途进行分类和归纳: 1. 查询类指令 知识问答: 指令示例&a…

[算法] 优先算法(四):滑动窗口(下)

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

python 性能提升-C扩展

文章目录 python的缺点性能提升C扩展案例python的缺点 运行效率低 性能提升 性能瓶颈问题使用如下方式解决: C/C++实现耗时的代码,然后使用gcc/g++编译为动态库dll/so,在python中使用ctypes模块进行加载动态库;C为python耗时的代码编写扩展,需使用 Python.h 头文件,…

20240708 每日AI必读资讯

🤖破解ChatGPT惊人耗电!DeepMind新算法训练提效13倍,能耗暴降10倍 - 谷歌DeepMind研究团队提出了一种加快AI训练的新方法——多模态对比学习与联合示例选择(JEST),大大减少了所需的计算资源和时间。 - JE…

Java线程的创建·启动和休眠

一.线程的创建和启动 Java中创建线程的两种方式 ◆继承java.lang.Thread类 ◆实现java.lang.Runnable接口 ◆使用线程的步骤 继承Thread类创建线程 ◆自定义线程类继承自Thread类 ◆重写run()方法,编写线程执行体 ◆创建线程对象,调用start()方法启动…

目标检测YOLO实战应用案例100讲-基于深度学习的无人机影像小目标识别(续)

目录 3.2 实验平台和环境 3.3 实验评价指标 3.4 基础框架YOLOv5在无人机数据集上的实验 3.4.1 实验结果 3.4.2 结果分析 4基于深度学习的无人机影像目标检测算法 4.1 基于改进YOLOv5的小目标检测算法研究 4.1.1 增加注意力机制 4.1.2 增加检测层 4.1.3多尺…

2024年 春秋杯 网络安全联赛夏季赛 Web方向 题解WirteUp 部分

brother 题目描述:web哥,打点容易提权难。 打点就是最简单的SSTI。 执行下find / -user root -perm -4000 -print 2>/dev/null找一下具备suid权限的命令 /usr/lib/dbus-1.0/dbus-daemon-launch-helper /usr/bin/chsh /usr/bin/gpasswd /usr/bin/n…

互联网十万个为什么之什么是数据备份?

数据备份是按照一定的备份频率创建数据副本的过程,将重要的数据复制到其它位置或者存储介质,并对生成的副本保留一定的时长。备份通常储存在不同的物理介质或云端,以确保数据的连续性和完整性。有效的备份策略至关重要,以防止数据…

macos 10.15系统下载包,macOS Catalina for mac

macOS Catalina 让你喜欢的种种 Mac 体验都更进一步。你可以领略音乐、播客这两款全新 Mac app 的表演;在 Mac 上畅享各款自己心爱的 iPad app;拿起 iPad 和 Apple Pencil,拓展工作空间,释放创意灵感;再打开那些平时常…

【STL】vector的模拟实现

目录 vector的介绍和使用 vector的介绍 vector的使用 构造函数 迭代器 空间增长问题 vector的增删查改等 vector的迭代器失效问题 vector的模拟实现 insert reserve push_back push_front resize erase pop_back pop_front 代码 vector的介绍和使用 vecto…

数据的统计探针:SKlearn中的统计分析方法

数据的统计探针:SKlearn中的统计分析方法 在数据科学领域,统计分析是理解和解释数据的关键工具。Scikit-learn(简称sklearn),作为Python中一个功能强大的机器学习库,提供了多种方法来进行数据的统计分析。…

【PB案例学习笔记】-29制作一个调用帮助文档的小功能

写在前面 这是PB案例学习笔记系列文章的第29篇,该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习,提高编程技巧,以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码,小凡都上传到了gite…

每日一道算法题 LCR 150. 彩灯装饰记录 II

题目 LCR 150. 彩灯装饰记录 II - 力扣(LeetCode) Python # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.righ…

中英双语介绍超跑:Ferrari,Lamborghini,Porsche,Bentley,McLaren

中文版 法拉利(Ferrari) 历史 法拉利成立于1939年,由恩佐法拉利(Enzo Ferrari)创立,总部位于意大利马拉内罗。法拉利以其豪华跑车和赛车而闻名,特别是在一级方程式赛车(F1&#x…

2024年7月8日-7月14日(ue5肉鸽视频p34-p44)

试过重点放在独立游戏上,有个indienova独立游戏团队是全职的,由于他们干了几个月,节奏暂时跟不上,紧张焦虑了。五一时也有点自暴自弃了,实在没必要,按照自己的节奏走即可。精力和时间也有限,放在…

个人视角,社会影响力:自媒体的魅力所在

随着数字化时代的到来,自媒体正成为信息传播领域的一场革命。个人视角与社会影响力的结合,赋予了自媒体独特的魅力。在传统媒体受限制的同时,自媒体为每个人提供了表达自己观点和思想的自由。个体的真实视角使得自媒体在信息传播中发挥着重要…

14-40 剑和诗人14 - 为什么机器学习需要合成数据

​​​​​​ 数据是人工智能的命脉。如果没有高质量、有代表性的训练数据,我们的机器学习模型将毫无用处。但随着神经网络规模越来越大、人工智能项目越来越雄心勃勃,人们对数据的需求也越来越大,我们面临着一场危机——现实世界的数据收集和…

如何优化 PostgreSQL 中对于复杂数学计算的查询?

文章目录 一、理解复杂数学计算的特点二、优化原则(一)索引优化(二)查询重写(三)数据库配置调整(四)使用数据库内置函数的优势 三、具体的优化方案和示例(一)…