在 Vue 3 + TypeScript 中封裝組件時，需要注意以下幾點：
1. Props 定義
-
使用
defineProps或PropType定義組件的 props，并為其添加類型。 -
示例：
import { defineComponent, PropType } from 'vue';export default defineComponent({props: {title: {type: String as PropType<string>,required: true,},count: {type: Number as PropType<number>,default: 0,},}, });
2. Emit 事件
-
使用
defineEmits定義組件發出的事件，并為其添加類型。 -
示例：
import { defineComponent } from 'vue';export default defineComponent({emits: ['update:count'],setup(props, { emit }) {const increment = () => {emit('update:count', props.count + 1);};return {increment,};}, });
3. Slots 插槽
-
使用
slots定義插槽，并通過v-slot或#語法使用。 -
示例：
<template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div> </template>
4. Scoped Slots 作用域插槽
-
通過
v-slot或#語法傳遞數據給插槽。 -
示例：
<template><div><slot :item="item"></slot></div> </template><script lang="ts"> import { defineComponent } from 'vue';export default defineComponent({setup() {const item = { name: 'Vue 3' };return {item,};}, }); </script>
5. Provide/Inject
-
使用
provide和inject實現跨組件數據傳遞，并為其添加類型。 -
示例：
import { defineComponent, provide, inject } from 'vue';const key = Symbol();export default defineComponent({setup() {provide(key, 'some value');}, });export const useInjectedValue = () => inject(key);
6. Composable 函數
-
將可復用的邏輯提取到
composable函數中，并為其添加類型。 -
示例：
import { ref, computed } from 'vue';export function useCounter() {const count = ref(0);const double = computed(() => count.value * 2);function increment() {count.value++;}return {count,double,increment,}; }
7. 類型推斷
-
利用 TypeScript 的類型推斷功能，確保組件內部邏輯的類型安全。
-
示例：
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const count = ref(0); // TypeScript 會自動推斷 count 為 Ref<number>return {count,};}, });
8. 組件引用
-
使用
ref引用子組件，并為其添加類型。 -
示例：
import { defineComponent, ref } from 'vue'; import ChildComponent from './ChildComponent.vue';export default defineComponent({components: {ChildComponent,},setup() {const childRef = ref<InstanceType<typeof ChildComponent>>();return {childRef,};}, });
9. 樣式隔離
-
使用
scoped樣式或 CSS Modules 確保樣式隔離。 -
示例：
<template><div class="my-component"><p>Hello World</p></div> </template><style scoped> .my-component {color: red; } </style>
10. 單元測試
-
使用
Jest或Vitest編寫單元測試，確保組件功能正確。 -
示例：
import { mount } from '@vue/test-utils'; import MyComponent from './MyComponent.vue';test('MyComponent', () => {const wrapper = mount(MyComponent, {props: {title: 'Hello',},});expect(wrapper.text()).toContain('Hello'); });
11. 文檔和示例
- 為組件編寫清晰的文檔和使用示例，方便其他開發者理解和使用。
12. 性能優化
- 使用
v-if、v-show、keep-alive等優化組件渲染性能。 - 避免不必要的重新渲染。
13. 錯誤處理
- 在組件中添加錯誤處理邏輯，確保組件在異常情況下仍能正常工作。
14. 國際化
- 如果組件需要支持多語言，使用
vue-i18n或其他國際化方案。
15. 可訪問性
- 確保組件符合可訪問性標準（如 ARIA 屬性），提升用戶體驗。
通過以上步驟，可以確保封裝的 Vue 3 + TypeScript 組件具備良好的可維護性、可復用性和類型安全性。
)
