《我的vue3 setup+ts使用實踐》
最近做了一個vue3的項目,感覺下面的寫法還挺好,分享給大家,歡迎指正!
[擊掌]如果大佬你有啥好的實踐方法,歡迎大家評論留言!
1、interface
使用namespace定義頁面的interface
PageData存在接口相關資料
PageState存放互動相關資料,例如loading,頁面status,中間變量等
使用Class實作interface并且設定default值
export namespace Page1 {
export interface PageState {}
export interface PageData {
name: string
}
export enmu Status {}
export enmu Action {}
export class PageDataObj implements PageData {
name: string = '蘇小胖'
}
}
2、component
清爽的return,明确的知道template需要變量和fun
const pageData = reactive<Page1.PageData>(new Page1.PageDataObj)
// 内部函數_開頭
const _fun1 = () => {}
const fun2 = () => {}
return {
...toRefs(PageData),
// 合并導出枚舉
Enum: {
Page1.Status,
Page1.Action,
},
publicFun2,
}
#程式員##軟體工程師##前端開發#