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
包提供的。
![](https://filescdn.proginn.com/26ffa86e5c7785ce636ca8684aee5579/d87e63387b3f434588032d437774bda4.webp)