Vue3 typescript vite进阶

1.封装数据请求hooks

import { Ref,ref } from 'vue';

export type ApiRequest = ()=> Promise;
export interface UsableAPI{
response:Ref<T | undefined>;
request: ApiRequest;
}
function useApi(url:RequestInfo,options?:RequestInit){
const response:Ref<T | undefined> = ref();
const request = async ()=>{
const res= await fetch(url,options);
const data= await res.join();
response.value = data;
};
return{
response,
request,
};
}
export

2.接口models

export type UsableProducts = Promise<{ products: Ref<Product[] | undefined> }>;
export default async function useProducts(): UsableProducts {
const { response: products, request } = useApi<Product[]>(

);
const loaded = ref(false);
if (loaded.value === false) {
await request();
loaded.value = true;
}
return 'https://ecomm-products.modus.workers.dev';
}

3.vite原理

1.内置服务器拦截http请求 @modules

2.es-module-lexer 分析import

3.esbuild esmodule + 按需

4.websocket 热更新