Vue 3 + TypeScript + Vite

vue 接口缓存 资源缓存 首屏优化 指令与hooks

一、接口缓存

1. 引入方式

import { useCache } from "vue-cache-optimization";
或者
import useCache from "vue-cache-optimization/useResize";

2. 使用方法

a. useCache 是一个重载函数，在接口调用前设置缓存：

const getCacheData = useCache({ url, method, params })
const data = getCacheData(options?.cache || false)
// data 存在时直接返回data，不必再调用接口

b. useCache 是一个重载函数，接口调用后获取缓存：

const setCacheData = useCache({ url, method, params, data })
setCacheData(options?.cache || false)

3. 调用方式，以 axios + vue 为例：

// axios
const instance: AxiosInstance = axios.create({
    baseURL: '/',
    timeout: 10000,
    headers: { 'X-Custom-Header': 'foobar' }
})
export const request = (url: string, method: string, params?: any, options?: Options) => {
    // 获取缓存数据 - start -
    const getCacheData = useCache({ url, method, params })
    const data = getCacheData(options?.cache || false)
    if (data) {
        return Promise.resolve(data)
    }
    // 获取缓存数据 - end -
    return instance({
        method,
        url,
        data: params,
        params,
        signal: controller.signal
    }).then((data: any) => {
        // 设置缓存数据 - start -
        const setCacheData = useCache({ url, method, params, data })
        setCacheData(options?.cache || false)
        // 设置缓存数据 - end -
        return data
    })
}
export const get = (url: string, params?: any, options?: Options) => {
    return request(url, 'GET', params, options)
}
export const post = (url: string, params?: any, options?: Options) => {
    return request(url, 'POST', params, options)
}

// xxx.vue
http.get('/api/users', { id: 1 }, { cache: true })
    .then((res) => (users.value = res))

二、资源缓存

三、首屏优化

1. 接口缓存
2. 资源缓存
3. app 加载前，添加默认 loading 效果
4. 骨架屏

四、untils 指令 + hooks函数

1. useDrag

// main.js
import { useDrag } from 'vue-cache-optimization'
const app = createApp(App)
app.use(useDrag)

// xxx.vue mehtod
const doDrag = (e: MouseEvent) => {
    console.log('drag', e)
}
// xxx.vue template
<div class="drag" v-drag="doDrag">drag</div>
// xxx.vue style
.drag {
  position: fixed;
}

2. useLazy

// main.js
import { useLazy } from 'vue-cache-optimization'
const app = createApp(App)
app.use(useLazy)

// xxx.vue template
<div v-for="imgUrl of images">
    {{ imgUrl }}
    <img v-lazy="imgUrl" src="" alt="" />
</div>

3. useBase64

// main.js
import { useBase64 } from 'vue-cache-optimization'
const app = createApp(App)
app.use(useBase64)

// xxx.vue mehtod
const getBase64 = (el: Element, str: string) => {
    console.log('getBase64...', el, str)
}
// xxx.vue template
<img src="@/assets/images/default.png" v-base64="getBase64" alt="" />

4. useResize

// main.js
import { useResize } from 'vue-cache-optimization'
const app = createApp(App)
app.use(useResize)

// xxx.vue mehtod
const doResize = (e: any, resize: any) => {
    console.log('doResize...', e, resize)
    if (e.width < 200) {
        resize.unobserve(e.target)
    }
}
// xxx.vue template
<div class="resize" v-resize="doResize">resize</div>
// xxx.vue style
.resize {
    border: 1px solid red;
    resize: both;
    overflow: hidden;
}

5. useScroll

// main.js
import { useScroll } from 'vue-cache-optimization'
import "./../dist/assets/style.css" // 引入 useScroll 的时候, 需要引入滚动条样式
const app = createApp(App)
app.use(useScroll)

// xxx.vue mehtod
import { throttle } from 'vue-cache-optimization'
const onScroll = (e: any) => {
    console.log('layout scroll...', e.scrollbarYTop)
}
// xxx.vue template
<div
    class="main"
    v-scroll="throttle(onScroll, 1000, true)"
>
    <div>throttle 节流,每1000毫秒触发一次,第三个参数是先执行一次</div>
    <div v-for="item in 1000">{{ item }}</div>
</div>
// xxx.vue style
.main{
    overflow: hidden;
    position: relative;
}

支持类型

/**
 * formats: 默认 ["es", "cjs"]
 * amd – 异步模块加载，适用于 RequireJS 等模块加载器
 * cjs – CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）
 * es – 将 bundle 保留为 ES 模块文件，适用于其他打包工具，以及支持 <script type=module> 标签的浏览器
 * iife – 自执行函数，适用于 <script> 标签（如果你想为你的应用程序创建 bundle，那么你可能会使用它）
 * umd – 通用模块定义规范，同时支持 amd，cjs 和 iife
 */