Vue Single File Components or Vue单文件组件的改进你喜欢吗？

最新推荐文章于 2024-10-28 13:44:55 发布

原创

最新推荐文章于 2024-10-28 13:44:55 发布 · 844 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #html5 #vue.js #css #javascript

尤雨溪提出了一项RFC，旨在改进Vue的单文件组件（SFC），减少组件名称的重复输入。新特性允许组件的本地注册名从其文件名推断，提高开发效率。虽然这需要Vetur和@vuedx等工具进行更新，但预计会减少这些工具的复杂性。此改动完全向后兼容，但建议避免混合手动导入和新的语法，以确保依赖提取信息的工具能够做出更安全的假设。

尤雨溪在今天上午发布了一篇关于提升单文件组件体验的RFCs 记录下我最喜欢的一个改变。

动机与目的:

Currently in SFCs you have to import a component and then pass it to the export default { components: { … } } hash, which leads to a lot of redundancy: for a single component we are repeating its name 3 times: in the imported binding, the file name, and the components option.

The sugar requires the name of each component to be specified only once.

示例代码：

Normal Components

After

Async Components

After

Component Renaming

By default, the component’s locally registered name is inferred from its filename. But they can be renamed locally:

Drawbacks
This would require updates in tools that parse SFC content for template analysis - e.g. Vetur & @vuedx.

However, since this information is going to be provided directly by @vue/compiler-sfc in the parsed SFC descriptor, it should remove some extra complexity from these tools as well.

Alternatives