自定义KeepAlive，支持 include 变量为defineAsyncComponent数组

最新推荐文章于 2024-11-08 18:23:13 发布
最新推荐文章于 2024-11-08 18:23:13 发布
阅读量193 收藏
点赞数 3
分类专栏： vue3.0 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/simpleman2000/article/details/139172548
版权 
import { onMounted, getCurrentInstance, watch, onUpdated, onBeforeUnmount, isVNode } from 'vue';
import { isString, isFunction, isPromise, isArray, NOOP, getGlobalThis, extend, EMPTY_OBJ, toHandlerKey, looseToNumber, hyphenate, camelize, isObject, isOn, hasOwn, isModelListener, capitalize, toNumber, hasChanged, remove, isSet, isMap, isPlainObject, isBuiltInDirective, invokeArrayFns, isRegExp, isGloballyAllowed, NO, def, isReservedProp, EMPTY_ARR, toRawType, makeMap, normalizeClass, stringifyStyle, normalizeStyle, isKnownSvgAttr, isBooleanAttr, isKnownHtmlAttr, includeBooleanAttr, isRenderableAttrValue } from '@vue/shared';
let isFlushing = false;
let isFlushPending = false;
const queue = [];
let flushIndex = 0;
const pendingPostFlushCbs = [];
let activePostFlushCbs = null;
let postFlushIndex = 0;
const resolvedPromise = /* @__PURE__ */ Promise.resolve();
let currentFlushPromise = null;
const RECURSION_LIMIT = 100;
function nextTick(fn) {
    const p = currentFlushPromise || resolvedPromise;
    return fn ? p.then(this ? fn.bind(this) : fn) : p;
}
function findInsertionIndex(id) {
    let start = flushIndex + 1;
    let end = queue.length;
    while (start < end) {
        const middle = start + end >>> 1;
        const middleJob = queue[middle];
        const middleJobId = getId(middleJob);
        if (middleJobId < id || middleJobId === id && middleJob.pre) {
            start = middle + 1;
        } else {
            end = middle;
        }
    }
    return start;
}
function queueJob(job) {
    if (!queue.length || !queue.includes(
        job,
        isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
    )) {
        if (job.id == null) {
            queue.push(job);
        } else {
            queue.splice(findInsertionIndex(job.id), 0, job);
        }
        queueFlush();
    }
}
function queueFlush() {
    if (!isFlushing && !isFlushPending) {
        isFlushPending = true;
        currentFlushPromise = resolvedPromise.then(flushJobs);
    }
}
function invalidateJob(job) {
    const i = queue.indexOf(job);
    if (i > flushIndex) {
        queue.splice(i, 1);
    }
}
function queuePostFlushCb(cb) {
    if (!isArray(cb)) {
        if (!activePostFlushCbs || !activePostFlushCbs.includes(
            cb,
            cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
        )) {
            pendingPostFlushCbs.push(cb);
        }
    } else {
        pendingPostFlushCbs.push(...cb);
    }
    queueFlush();
}
function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
    if (!!(process.env.NODE_ENV !== "production")) {
        seen = seen || /* @__PURE__ */ new Map();
    }
    for (; i < queue.length; i++) {
        const cb = queue[i];
        if (cb && cb.pre) {
            if (instance && cb.id !== instance.uid) {
                continue;
            }
            if (!!(process.env.NODE_ENV !== "production") && checkRecursiveUpdates(seen, cb)) {
                continue;
            }
            queue.splice(i, 1);
            i--;
            cb();
        }
    }
}
function flushPostFlushCbs(seen) {
    if (pendingPostFlushCbs.length) {
        const deduped = [...new Set(pendingPostFlushCbs)].sort(
            (a, b) => getId(a) - getId(b)
        );
        pendingPostFlushCbs.length = 0;
        if (activePostFlushCbs) {
            activePostFlushCbs.push(...deduped);
            return;
        }
        activePostFlushCbs = deduped;
        if (!!(process.env.NODE_ENV !== "production")) {
            seen = seen || /* @__PURE__ */ new Map();
        }
        for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
            if (!!(process.env.NODE_ENV !== "production") && checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
                continue;
            }
            activePostFlushCbs[postFlushIndex]();
        }
        activePostFlushCbs = null;
        postFlushIndex = 0;
    }
}
const getId = (job) => job.id == null ? Infinity : job.id;
const comparator = (a, b) => {
    const diff = getId(a) - getId(b);
    if (diff === 0) {
        if (a.pre && !b.pre)
            return -1;
        if (b.pre && !a.pre)
            return 1;
    }
    return diff;
};
function flushJobs(seen) {
    isFlushPending = false;
    isFlushing = true;
    if (!!(process.env.NODE_ENV !== "production")) {
        seen = seen || /* @__PURE__ */ new Map();
    }
    queue.sort(comparator);
    const check = !!(process.env.NODE_ENV !== "production") ? (job) => checkRecursiveUpdates(seen, job) : NOOP;
    try {
        for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
            const job = queue[flushIndex];
            if (job && job.active !== false) {
                if (!!(process.env.NODE_ENV !== "production") && check(job)) {
                    continue;
                }
                callWithErrorHandling(job, null, 14);
            }
        }
    } finally {
        flushIndex = 0;
        queue.length = 0;
        flushPostFlushCbs(seen);
        isFlushing = false;
        currentFlushPromise = null;
        if (queue.length || pendingPostFlushCbs.length) {
            flushJobs(seen);
        }
    }
}
function checkRecursiveUpdates(seen, fn) {
    if (!seen.has(fn)) {
        seen.set(fn, 1);
    } else {
        const count = seen.get(fn);
        if (count > RECURSION_LIMIT) {
            const instance = fn.ownerInstance;
            const componentName = instance && getComponentName(instance.type);
            handleError(
                `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
                null,
                10
            );
            return true;
        } else {
            seen.set(fn, count + 1);
        }
    }
}


function resetShapeFlag(vnode) {
    vnode.shapeFlag &= ~256;
    vnode.shapeFlag &= ~512;
}
function queueEffectWithSuspense(fn, suspense) {
    if (suspense && suspense.pendingBranch) {
        if (isArray(fn)) {
            suspense.effects.push(...fn);
        } else {
            suspense.effects.push(fn);
        }
    } else {
        queuePostFlushCb(fn);
    }
}

const queuePostRenderEffect = queueEffectWithSuspense;
function getInnerChild(vnode) {
    return vnode.shapeFlag & 128 ? vnode.ssContent : vnode;
}
const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
const isSuspense = (type) => type.__isSuspense;
function createDevtoolsComponentHook(hook) {
    return (component) => {
        emit$1(
            hook,
            component.appContext.app,
            component.uid,
            component.parent ? component.parent.uid : void 0,
            component
        );
    };
}
let devtools$1;
let buffer = [];
let devtoolsNotInstalled = false;
function emit$1(event, ...args) {
    if (devtools$1) {
        devtools$1.emit(event, ...args);
    } else if (!devtoolsNotInstalled) {
        buffer.push({ event, args });
    }
}
function setDevtoolsHook$1(hook, target) {
    var _a, _b;
    devtools$1 = hook;
    if (devtools$1) {
        devtools$1.enabled = true;
        buffer.forEach(({ event, args }) => devtools$1.emit(event, ...args));
        buffer = [];
    } else if (
        // handle late devtools injection - only do this if we are in an actual
        // browser environment to avoid the timer handle stalling test runner exit
        // (#4815)
        typeof window !== "undefined" && // some envs mock window but not fully
        window.HTMLElement && // also exclude jsdom
        !((_b = (_a = window.navigator) == null ? void 0 : _a.userAgent) == null ? void 0 : _b.includes("jsdom"))
    ) {
        const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
        replay.push((newHook) => {
            setDevtoolsHook$1(newHook, target);
        });
        setTimeout(() => {
            if (!devtools$1) {
                target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
                devtoolsNotInstalled = true;
                buffer = [];
            }
        }, 3e3);
    } else {
        devtoolsNotInstalled = true;
        buffer = [];
    }
}
function devtoolsInitApp(app, version) {
    emit$1("app:init" /* APP_INIT */, app, version, {
        Fragment,
        Text,
        Comment,
        Static
    });
}
function devtoolsUnmountApp(app) {
    emit$1("app:unmount" /* APP_UNMOUNT */, app);
}
const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
    "component:added" /* COMPONENT_ADDED */
);
const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
    "component:removed" /* COMPONENT_REMOVED */
);
const devtoolsComponentRemoved = (component) => {
    if (devtools$1 && typeof devtools$1.cleanupBuffer === "function" && // remove the component if it wasn't buffered
        !devtools$1.cleanupBuffer(component)) {
        _devtoolsComponentRemoved(component);
    }
};

function isSameVNodeType(n1, n2) {
    if (!!(process.env.NODE_ENV !== "production") && n2.shapeFlag & 6 && hmrDirtyComponents.has(n2.type)) {
        n1.shapeFlag &= ~256;
        n2.shapeFlag &= ~512;
        return false;
    }
    return n1.type === n2.type && n1.key === n2.key;
}



let isHmrUpdating = false;
const hmrDirtyComponents = /* @__PURE__ */ new Set();

const map = /* @__PURE__ */ new Map();
function registerHMR(instance) {
  const id = instance.type.__hmrId;
  let record = map.get(id);
  if (!record) {
    createRecord(id, instance.type);
    record = map.get(id);
  }
  record.instances.add(instance);
}
function unregisterHMR(instance) {
  map.get(instance.type.__hmrId).instances.delete(instance);
}
function createRecord(id, initialDef) {
  if (map.has(id)) {
    return false;
  }
  map.set(id, {
    initialDef: normalizeClassComponent(initialDef),
    instances: /* @__PURE__ */ new Set()
  });
  return true;
}

function getComponentName(Component, includeInferred = true) {
    return isFunction(Component) ? Component.displayName || Component.name : Component.name || includeInferred && Component.__name;
}
const KeepAliveImpl = {
    name: `KeepAlive`,
    // Marker for special handling inside the renderer. We are not using a ===
    // check directly on KeepAlive in the renderer, because importing it directly
    // would prevent it from being tree-shaken.
    __isKeepAlive: true,
    props: {
        include: [String, RegExp, Array],
        exclude: [String, RegExp, Array],
        max: [String, Number]
    },
    setup(props, { slots }) {
        const instance = getCurrentInstance();
        const sharedContext = instance.ctx;
        if (!sharedContext.renderer) {
            return () => {
                const children = slots.default && slots.default();
                return children && children.length === 1 ? children[0] : children;
            };
        }
        const cache = /* @__PURE__ */ new Map();
        const keys = /* @__PURE__ */ new Set();
        let current = null;
        instance.__v_cache = cache;

        const parentSuspense = instance.suspense;
        const {
            renderer: {
                p: patch,
                m: move,
                um: _unmount,
                o: { createElement }
            }
        } = sharedContext;
        const storageContainer = createElement("div");
        sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
            const instance2 = vnode.component;
            move(vnode, container, anchor, 0, parentSuspense);
            patch(
                instance2.vnode,
                vnode,
                container,
                anchor,
                instance2,
                parentSuspense,
                namespace,
                vnode.slotScopeIds,
                optimized
            );
            queuePostRenderEffect(() => {
                instance2.isDeactivated = false;
                if (instance2.a) {
                    invokeArrayFns(instance2.a);
                }
                const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
                if (vnodeHook) {
                    invokeVNodeHook(vnodeHook, instance2.parent, vnode);
                }
            }, parentSuspense);
            if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
                devtoolsComponentAdded(instance2);
            }
        };
        sharedContext.deactivate = (vnode) => {
            const instance2 = vnode.component;
            move(vnode, storageContainer, null, 1, parentSuspense);
            queuePostRenderEffect(() => {
                if (instance2.da) {
                    invokeArrayFns(instance2.da);
                }
                const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
                if (vnodeHook) {
                    invokeVNodeHook(vnodeHook, instance2.parent, vnode);
                }
                instance2.isDeactivated = true;
            }, parentSuspense);
            if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
                devtoolsComponentAdded(instance2);
            }
        };
        function unmount(vnode) {
            resetShapeFlag(vnode);
            _unmount(vnode, instance, parentSuspense, true);
        }
        function pruneCache(filter) {
            cache.forEach((vnode, key) => {
                if (!filter || !filter(key)) {
                    pruneCacheEntry(key);
                }
            });
        }
        function pruneCacheEntry(key) {
            const cached = cache.get(key);
            if (!current || !isSameVNodeType(cached, current)) {
                unmount(cached);
            } else if (current) {
                resetShapeFlag(current);
            }
            cache.delete(key);
            keys.delete(key);
        }
        watch(
            () => [props.include, props.exclude],
            ([include, exclude]) => {
                include && pruneCache((name) => include.indexOf(name) >= 0);
                exclude && pruneCache((name) => !include.indexOf(name) >= 0);
            },
            // prune post-render after `current` has been updated
            { flush: "post", deep: true }
        );
        let pendingCacheKey = null;
        const cacheSubtree = () => {
            if (pendingCacheKey != null) {
                cache.set(pendingCacheKey, getInnerChild(instance.subTree));
            }
        };
        onMounted(cacheSubtree);
        onUpdated(cacheSubtree);
        onBeforeUnmount(() => {
            cache.forEach((cached) => {
                const { subTree, suspense } = instance;
                const vnode = getInnerChild(subTree);
                if (cached.type === vnode.type && cached.key === vnode.key) {
                    resetShapeFlag(vnode);
                    const da = vnode.component.da;
                    da && queuePostRenderEffect(da, suspense);
                    return;
                }
                unmount(cached);
            });
        });
        return () => {
            pendingCacheKey = null;
            if (!slots.default) {
                return null;
            }
            const children = slots.default();
            const rawVNode = children[0];
            if (children.length > 1) {
                if (!!(process.env.NODE_ENV !== "production")) {
                    warn$1(`KeepAlive should contain exactly one component child.`);
                }
                current = null;
                return children;
            } else if (!isVNode(rawVNode) || !(rawVNode.shapeFlag & 4) && !(rawVNode.shapeFlag & 128)) {
                current = null;
                return rawVNode;
            }
            let vnode = getInnerChild(rawVNode);
            const comp = vnode.type;
            const name = vnode.type;
            const { include, exclude, max } = props;
            if (include && (!name || !(include.indexOf(name) >= 0)) || exclude && name && exclude.indexOf(name)) {
                current = vnode;
                return rawVNode;
            }
            const key = vnode.key == null ? comp : vnode.key;
            const cachedVNode = cache.get(key);
            if (vnode.el) {
                vnode = cloneVNode(vnode);
                if (rawVNode.shapeFlag & 128) {
                    rawVNode.ssContent = vnode;
                }
            }
            pendingCacheKey = key;
            if (cachedVNode) {
                vnode.el = cachedVNode.el;
                vnode.component = cachedVNode.component;
                if (vnode.transition) {
                    setTransitionHooks(vnode, vnode.transition);
                }
                vnode.shapeFlag |= 512;
                keys.delete(key);
                keys.add(key);
            } else {
                keys.add(key);
                if (max && keys.size > parseInt(max, 10)) {
                    pruneCacheEntry(keys.values().next().value);
                }
            }
            vnode.shapeFlag |= 256;
            current = vnode;
            return isSuspense(rawVNode.type) ? rawVNode : vnode;
        };
    }
};
const MyKeepAlive = KeepAliveImpl;
export default MyKeepAlive;
“fetch“ 支持 “keepAlive“ 选项替换.Navigator.sendBeacon()
liuhao9999的博客
06-15 1229
"fetch" 支持 "keepAlive" 选项替换.Navigator.sendBeacon()
vue-动态组件（component），缓存组件（keep-alive）、异步组件（defineAsyncComponent ）
weixin_68211919的博客
10-16 3446
一、v-if和v-for两个条件使用避免多余标签 二、动态组件（component）（is为属性，is为变量的情况） 三、缓存组件（keep-alive）（与动态组件结合使用，生命周期函数、选择性缓存组件和选择性不缓存组件，缓存多个组件） 四、异步组件（defineAsyncComponent ）（懒加载组件和预渲染组件）
Vue：defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)
lemon_宁萌
12-22 3906
Vue：defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)
对于keep-alive和 Async Components的理解
LRQQHM的博客
04-22 258
参照Vue.js：https://vuejs.org/v2/guide/components-dynamic-async.html?#Handling-Loading-State keep-alive 希望组件的实例（例如在切换选项卡的时候）在首次创建后就被缓存 这个时候就可以使用<keep-alive> <keep-alive> <component v-bind:is="currentTabComponent"></component> </ke
vue的动态组件和异步组件及keep-alive
丑小鸭变黑天鹅的博客
04-07 651
vue的动态组件和异步组件一、动态组件二、keep-alive三、异步组件 一、动态组件 动态组件是使用 component 组件，通过一个特殊的attribute is 来实现 下面通过一个例子去解释动态组件怎么用 如上图所示，比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示 这个案例我们可以通过三种不同的实现思路来实现 方式一：通过v-if来判断，显示不同的组件 方式二：动态组件的方式 方式三：使用路由router-link和router-view v-if显
keep-alive用法（include、exclude、max）
热门推荐
yimeichengxuyuan的博客
10-13 3万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1.用处2.属性3.介绍4.使用使用中可能遇到的问题 1.用处 主要用于保留组件状态或避免重新渲染。 2.属性 include 字符串，数组或正则表达式。只有名称匹配的组件会被缓存。 exclude 字符串，数组或正则表达式。任何名称匹配的组件都不会缓存。 max 数字。最多可以缓存多少组件实例。 3.介绍 < keep-alive > 包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。 < ke
解决Vue中使用keepAlive不缓存问题
10-15
在`router.js` 文件中，为需要缓存的路由添加`meta` 属性，如： ```javascript { path: '/loanmessage', component: loanmessage, name: 'loanmessage', meta: { keepAlive: true, // 代表需要缓存 isBack: ...
在Linux环境下使用TCP的keepalive机制
01-20
Linux内置支持keepalive机制，为了使用它，你需要使能TCP/IP网络，为了能够配置内核在运行时的参数，你还需要procfs和sysctl的支持。 　这个过程涉及到keepalive使用的三个用户驱使的变量： 　tcp_keepalive_time...
keepalive--aarch64.rar
12-28
标题中的"keepalive--aarch64.rar"表明这是一个针对aarch64架构的软件或程序，使用了“keepalive”技术，并且被压缩在RAR文件格式中。RAR是一种流行的压缩格式，通常用于存储和传输大量数据，因为它可以提供较高的...
vue中keep-alive的用法
liaoxianhua888的博客
04-08 595
在开发项目需求中，可以需要用户切换选项时，用户填写的数据回来时还需要显示，这时我们就要用keep-alive <keep-alive> <router-view></router-view> </keep-alive> 这时如果我只想对Home组件进行缓存，其它组件不需要缓存 <keep-alive include="Home"> <router-view></router-view> </keep-al
十、组件（5）
走在bug的路上
10-12 1万+
● 动态组件 ● 异步组件
vue3使用动态component
m0_63701303的博客
11-30 3599
vue3使用动态component
vue3 中的内置组件KeepAlive
qq_35191010的博客
04-11 318
vue3 中的内置组件KeepAlive
【Vue2】动态组件的使用-切换组件和keep-alive，以及异步组件
weixin_44899940的博客
08-15 2171
动态组件的使用-切换组件和keep-alive，以及异步组件。
Vue3 - 组件化开发二
weixin_39137100的博客
01-17 584
温故知新 动态组件 动态组件是使用component组件，通过特殊的attribute中的is 来实现的 <component :is='currentTab'></component> currentTab的值要求 可以是通过component函数注册的组件 组件对象的components对象中注册的组件 动态组件传值 动态组件可以传值和监听事件吗？ 肯定的，只是需要将属性和监听事件放到component上来使用 <component name='tomat
Vue3动态组件/异步组件
weixin_44530344的博客
08-18 1532
当一个组件实例从 DOM 中移除但它是由 缓存的组件树的一部分时keepalive，它会进入停用状态而不是被卸载。当组件实例作为缓存树的一部分插入 DOM 时，它会被激活。isIntersecting 可以判断组件是否出现在视口，初始值为false，当组件出现在视口就会加载其组件。简单来说，就是组件不需要响应式，这样可以提高性能。组件在非活动状态，依旧保持组件的实例。即组件被切换时，状态不会被重置。异步组件在不使用插件的情况下，他会按需加载组件需要的js文件。...
动态组件、keep-alive的使用及自定义指令
qq_57423665的博客
04-24 721
1.什么是自定义指令vue 官方提供了v-text、v-for、 v-model、 v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。2. 自定义指令的分类。
Vue keep-alive 深度使用解读
最新发布
小易不止于搬砖的博客
11-08 1873
keep-alive的使用方法、业务场景、以及原理
自定义协议：如何实现keepalive
BBinChina的专栏
02-28 534
网络通讯中如何实现keepalive，以及自定义协议实现链接keepalive，做好rpc的基础
keepalive的include属性
05-12
在HTTP协议中，keepalive是指客户端与服务器之间保持持久连接的机制。在HTTP请求头中可以通过设置Connection: keep-alive来启用keepalive机制。keepalive机制可以避免每次请求都需要重新建立连接，提高网络传输效率。 在keepalive机制中，服务器可以设置一个超时时间，如果客户端在规定时间内没有再次发送请求，则服务器会关闭连接。为了避免连接被关闭，客户端可以通过在HTTP请求头中设置Keep-Alive: timeout=xxx属性来告诉服务器保持连接的时间。 另外，HTTP请求头中还有一个叫做include的属性，它用于指定在keepalive连接中是否包含请求头信息。如果include属性设置为true，则每次请求都会携带请求头信息；如果设置为false，则只有第一次请求会携带请求头信息，后续请求会忽略请求头信息。通过设置include属性，可以在保证keepalive机制的同时减少网络传输的数据量，提高网络传输效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值