本文介紹了如何將Vue2組件遷移至Vue3的組合式API。主要內容包括：1) 使用<script setup lang="ts">語法；2) 通過接口定義props類型約束；3) 用defineProps替代props選項；4) 將data變量轉為ref響應式變量；5) 使用computed替代計算屬性；6) 將created生命周期替換為onMounted；7) 直接在setup中定義方法；8) 采用TypeScript規范的API導入方式。文章保留了原有模板和樣式，確保功能一致，同時提供了完整的代碼示例，展示了如何實現微信小程序和其他平臺的頭部導航欄組件。

1. 語法轉換：使用Vue3 的 <script setup lang="ts"> 組合式 API 格式
2. 類型定義：添加了 HeadViewProps 接口，為 props 提供了明確的類型約束
3. Props 處理：使用 defineProps 替代了 Vue2 的 props 選項，并保持了原有的默認值
4. 響應