vue3响应式对象带缓存封装，实现监听 - CachedRef＜T＞

凤凰涅檠

已于 2022-03-03 17:23:01 修改

阅读量617

点赞数

分类专栏： vue3 文章标签： vue.js 前端 typescript

于 2022-03-03 13:46:22 首次发布

本文链接：https://blog.csdn.net/ch_weni/article/details/123251784

版权

本文介绍如何在Vue3中结合ref和Storage创建CachedRef，实现带有缓存的响应式对象，并提供了WatchService的使用示例。

摘要由CSDN通过智能技术生成

因为上一篇中代码相似度挺高，所以有了对ref与Storage的整合对象 CachedRef

上一篇：基于vue3的Storage对象监听服务 - WatchService_凤凰涅檠的博客-CSDN博客

CachedRef<T> 封装类

import { Ref, ref, UnwrapRef, watch } from "vue";
import { Cache } from "./cache";

/**
 * Storage缓存ref，实现监听
 */
export class CachedRef<T extends Object> {
    constructor(cachedKey, obj?, isCached?: boolean) {
        isCached = isCached ?? true
        if (isCached) {
            this.cachedKey = cachedKey;
            this.cachedObj = new Cache(cachedKey);
        }
        this.ref = ref<T>(this.cachedObj.isEmpty ? obj : this.cachedObj.json);
    }
    /**
     * 缓存key
     */
    cachedKey: string;
    /**
     * 缓存对象
     */
    cachedObj: Cache;
    /**
     * ref对象
     */
    ref: Ref&l