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

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

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

前置准备

1. 安装开发依赖

pnpm i -D vue-vine

2. 在 vite.config.ts 中导入插件：

3. 安装 vscode 高亮插件

4. 引入 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 中不允许调用多次。

小结

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