距 vfit.js 初版发布仅一个月，我们就收到了超预期的开发者关注 —— 每一条反馈、每一次讨论，都让我们更清晰地看到大屏适配场景中的真实需求。基于这份热情与信任，我们很高兴地宣布，vfit.js 迎来了 v2.0.0 重大版本更新！

本次更新不仅仅是版本号的提升，更是对大屏适配理念的一次深度梳理。我们从“通用适配”走向了“精准语义”，通过全新的组件体系和重构的核心逻辑，为开发者提供更优雅、更高效的大屏开发体验。

🚀 核心亮点

1. 全新的语义化组件体系 🧩

在 v1.x 版本中，我们主要依赖 FitContainer 这个“通用”组件来处理所有方位的适配。虽然灵活，但在实际开发中，大量的 top, left, right 参数往往让代码显得冗余且不够直观。

v2.0.0 引入了 5 个专用方位组件，将常用的布局模式固化为语义清晰的组件：

• <vfit-lt>  (Left-Top): 左上角定位 🔝
• <vfit-rt>  (Right-Top): 右上角定位 🔝
• <vfit-lb>  (Left-Bottom): 左下角定位 🔚
• <vfit-rb>  (Right-Bottom): 右下角定位 🔚
• <vfit-center>  (Center): 居中定位 🎯

对比示例：

旧版 (v1.x):

<!-- 需要手动指定单位和具体坐标 -->
<FitContainer :top="0" :left="0">
  <Logo />
</FitContainer>

新版 (v2.0):

<!-- 语义明确，无需多余参数 -->
<vfit-lt>
  <Logo />
</vfit-lt>

这一改变不仅减少了代码量，更让模板结构一目了然。

2. 智能居中与 Transform 冲突解决 ✨

在旧版本中，居中组件往往需要复杂的参数配置，且容易与用户自定义的 CSS transform 发生冲突。

v2.0.0 对 vfit-center 进行了深度优化：

• 零参数居中：默认即可实现完美的屏幕居中 🎯。
• Transform 融合：内部逻辑自动处理缩放（Scale）与位移（Translate）的合并，彻底解决了 CSS 样式覆盖导致的偏移问题 🔧。

3. 核心逻辑重构：Composables 🔩

为了提高代码的可维护性和复用性，我们将核心逻辑抽离为两个独立的 Composable 函数：

• useFitScale: 专注于屏幕尺寸监听与全局缩放比例计算 📏。
• useFitPosition: 专注于元素定位与坐标转换 📍。

这意味着你不仅可以使用内置组件，还可以直接在自己的组件中引入这些 Hook，实现高度定制化的适配逻辑。

📚 文档与生态升级

• 中英双语同步：文档现已实现 100% 中英内容对齐，包括最新的组件示例和 API 说明，更好地服务全球开发者 🌐。
• 赞助者回馈：我们在文档中更新了赞助者列表，感谢每一位支持开源的朋友（包括那位“产品经理的噩梦” 😉）🙏。
• 首页焕新：重新梳理了首页特性介绍，突出了“组件化精准定位”这一核心优势 ✨。

📦 如何升级

vfit.js v2.0.0 现已发布到 npm。

npm install vfit@latest

对于老用户， FitContainer 依然保留并作为“通用版”组件继续支持，您可以根据项目需求逐步迁移到新的语义化组件 🔄。

感谢您对 vfit.js的关注与支持，让我们一起构建更美好的数据可视化大屏！💪

1. 文档地址   https://web-vfit.netlify.app/
2. npm地址   https://www.npmjs.com/package/vfit
3. github地址 https://github.com/v-plugin/vfit