Vue Vine:创造另一种书写 Vue 组件的方式

前端全栈开发者

共 1060字,需浏览 3分钟

 ·

2023-08-02 20:37

Vue Vine:https://github.com/vue-vine/vue-vine

在社区中,有很多帖子讨论过希望有一个支持在单个文件中编写多个 Vue 组件的解决方案。Vue Vine 因此而生。

Vue Vine 旨在提供更多管理 Vue 组件的灵活性,它并不是要取代 Vue SFC,而是作为一种并行的解决方案。

为什么是另一种风格?

我看到很多关于支持 ”一个SFC文件中的多个组件“ 的讨论,但说实话,SFC是为每个文件一个组件而设计的,相关的工具链也是基于这个逻辑,并在Vue的开发过程中不断迭代。因此,基于这个概念,直接支持一个文件中的多个组件显然是不合理的。

通过几个Twitter帖子的调查,我发现确实存在着在一个文件中编写多个组件的普遍需求。于是我开始探索是否有另一种语法或组织方式可以最适合Vue现有的编译工具链,并利用现有的成就,同时为用户编写组件创造更大的灵活性。

我相信大多数像我这样参与Web前端开发的程序员都不能 ”从上到下“地编写UI视图,而是采用 ”从下到上“ 的方式。换句话说,他们一开始就写长的组件,然后再砍掉可重用的组件。

我是这样问大家的:“编写Vue时,你最怀念React的什么?”

在Vue和React的开发经验比较中,最明显的区别是组件的组织形式。由于JSX只是JavaScript函数,所以你可以很容易地开始编写一个新的组件。很多人回答说JSX实际上是他们喜欢的。

Vue对JSX也有不俗的支持,然而,JSX的问题是它太灵活了,它不能提供足够的编译时信息让Vue进行优化。但函数风格很好,我们确实喜欢它。

那么......为什么不尝试用一个函数来创建Vue组件,而把 script setup 逻辑和模板写在里面?

这就是 Vine 的诞生过程。

为什么它可以实现?

潜心研究了Vue SFC的编译结果后,你会发现它实际上被转化成了一个组件对象。所以,编译一个组件和编译多个组件并没有很大的区别,我所需要做的只是创建多个组件对象。

模板是基于一些来自用户脚本的绑定元数据进行编译的,这在模板中实现了“自动解包”。一些静态部分可以被自动吊出来进行优化。

所有这些处理都是由 @vue/compiler-dom 包提供的。

  
   

浏览 412
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报