织梦网站logo修改,网页制作题库,心理学网站可以在线做量表,阿里巴巴网站建设教程什么是 keep-alive#xff1f;
keep-alive 是一个内置组件#xff0c;用于缓存组件实例#xff0c;从而提高应用的性能。当包裹动态组件时#xff0c;keep-alive 会缓存不活跃的组件实例#xff0c;而不是销毁它们。这使得当组件重新激活时#xff0c;可…什么是 keep-alive
keep-alive 是一个内置组件用于缓存组件实例从而提高应用的性能。当包裹动态组件时keep-alive 会缓存不活跃的组件实例而不是销毁它们。这使得当组件重新激活时可以保留其状态避免重新渲染从而提升用户体验和性能。
主要用途
缓存组件状态当组件在不同路由之间切换时keep-alive 可以缓存组件的状态避免每次切换时重新渲染。优化性能通过缓存组件实例减少不必要的 DOM 操作和计算提高应用的响应速度。 基本用法
templatedivbutton clickactiveComponent ComponentAComponent A/buttonbutton clickactiveComponent ComponentBComponent B/buttonkeep-alivecomponent :isactiveComponent/component/keep-alive/div
/templatescript
import ComponentA from ./ComponentA.vue;
import ComponentB from ./ComponentB.vue;export default {components: {ComponentA,ComponentB},data() {return {activeComponent: ComponentA};}
};
/script
在这个例子中keep-alive 包裹了 component当 activeComponent 切换时组件实例会被缓存而不是销毁。 **include 和 exclude**用于控制哪些组件需要缓存支持字符串、正则表达式或数组。 keep-alive includeComponentA, ComponentB excludeComponentCrouter-view/router-view
/keep-alive 2. **max**用于指定缓存的组件数量当超出这个数量时最久未使用的组件实例将被销毁。 keep-alive :max10router-view/router-view
/keep-alive
与 router-view 一起使用
templatedivrouter-link to/aComponent A/router-linkrouter-link to/bComponent B/router-linkkeep-alive :include[ComponentA] :max10router-view/router-view/keep-alive/div
/template
keep-alive 的源码分析
export default {name: KeepAlive,abstract: true, // 这是一个抽象组件表示它不会直接渲染到 DOM 上props: {include: patternTypes, // 要缓存的组件exclude: patternTypes, // 不缓存的组件max: [String, Number] // 最大缓存数},created () {this.cache Object.create(null); // 缓存对象this.keys []; // 用来记录缓存的顺序},destroyed () {for (const key in this.cache) {pruneCacheEntry(this.cache, key, this.keys);}},watch: {include (val) {pruneCache(this, name matches(val, name));},exclude (val) {pruneCache(this, name !matches(val, name));}},render () {const slot this.$slots.default;const vnode getFirstComponentChild(slot); // 获取第一个子组件if (vnode) {const componentOptions vnode.componentOptions;const name getComponentName(componentOptions);if (name ((this.include !matches(this.include, name)) ||(this.exclude matches(this.exclude, name)))) {return vnode; // 如果不匹配 include/exclude直接返回不缓存}const key vnode.key null? componentOptions.Ctor.cid (componentOptions.tag ? ::${componentOptions.tag} : ): vnode.key;if (this.cache[key]) {vnode.componentInstance this.cache[key].componentInstance; // 从缓存中取出实例remove(this.keys, key); // 移除旧的位置this.keys.push(key); // 重新放到最后更新 LRU 位置} else {this.cache[key] vnode; // 缓存新实例this.keys.push(key);// 如果超过最大缓存数移除最早的实例if (this.max this.keys.length parseInt(this.max)) {pruneCacheEntry(this.cache, this.keys[0], this.keys, this._vnode);}}vnode.data.keepAlive true; // 标记组件为 keep-alive}return vnode || (slot slot[0]); // 返回 vnode}
};
