距 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