keep-alive组件缓存

相关文章

• 

  Vue使用keep-alive设置哪些组件可以被缓存，哪些不被缓存

  需求：当一个项目中，不是所有的组件页面都需要缓存起来，因为有些页面是不需要的    $route.meta.keepAlive 判断当前组件是否有keepAlive属性 在路由js文件中在配置路由规则的时候配置  

  2024年02月16日

  浏览(41)

• vue3，动态引入组件，同时动态设置组件的name，用于keep-alive缓存

  如果有两个页面逻辑大都相同，咱们想到的第一个肯定是写一个组件，然后两个路由都指向这个组件。 那如果现在多添加一个需求：两个页面在切换路由时都需要缓存数据，并且两个页面的缓存数据要求独立。 这个需求很简单：在router-view外层包裹一个keep-alive组件，指定缓

  2024年02月14日

  浏览(46)
• 

  keep-alive组件缓存

  从 a跳b，a已经销毁，b重新渲染；b跳a，b销毁a重新渲染 源组件销毁，目标组件渲染 组件缓存：组件实例等相关（  包括vnode ）存储起来 重新渲染指的是：把视图重新编译成新的vnode-dom diff-渲染成真实dom 真实dom被我移除了只是从页面上移除，只是把vnode重新渲染成真实dom或者

  2024年01月21日

  浏览(40)

• vue3，vite开发, 动态引入组件，同时动态设置组件的name，用于keep-alive缓存

  如果有两个页面逻辑大都相同，咱们想到的第一个肯定是写一个组件，然后两个路由都指向这个组件。 那如果现在多添加一个需求：两个页面在切换路由时都需要缓存数据，并且两个页面的缓存数据要求独立。 这个需求很简单：在router-view外层包裹一个keep-alive组件，指定缓

  2024年02月07日

  浏览(45)

• 缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题

  怎样在vue中缓存组件？大家都知道，使用keep-alive组件即可，但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。 是的， keep-alive组件是不会缓存滚动位置的 。 怎样缓存滚动位置呢？这是我们这一章讲的问题。 核心思想是在路由

  2024年02月16日

  浏览(44)
• 

  keep-alive 是 Vue 的一个内置组件，用于缓存其他组件的实例，以避免重复渲染和销毁，它可以在需要频繁切换的组件之间提供性能优化

  目录 keep-alive  使用 keep-alive 的示例代码： 手动清除组件缓存的示例代码： keep-alive 组件有以下几个优点： keep-alive 的原理： 使用 keep-alive 组件，你可以包裹需要缓存的组件，然后这些组件在切换时将会被缓存起来，而不是每次都重新创建。 使用 keep-alive 的示例代码： 我们

  2024年02月08日

  浏览(40)

• VUE3，自定义控制keep-alive缓存

  安装插件 npm install vite-plugin-vue-setup-extend --save 在vite.config.ts中 import VueSetupExtend from \\\'vite-plugin-vue-setup-extend\\\' ..... plugins：[         vue(),         VueSetupExtend(),         ..... ] useKeepalive.ts import { ref } from \\\"vue\\\" export const includes = refstring[]([]); // 增加缓存 export function addKeepAliveC

  2024年01月19日

  浏览(36)

• Vue3 除了 keep-alive，还有哪些实现页面缓存的方法

  有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数

  2024年02月06日

  浏览(42)
• 

  react 实现页面状态缓存（keep-alive）

  因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。 比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（

  2024年01月23日

  浏览(44)
• 

  keep-alive缓存三级及三级以上路由

  需求：需要缓存这个出入记录，当tab切换时不重新加载，当刷新页面时，或把这个关闭在重新打开时重新加载如图： （我这里用的是芋道源码的前端框架) 1、include 包含页面组件name的这些组件页面，会被缓存起来 2、exclude 除了这些name以外的页面组件，会被缓存起来 3、没有

  2024年02月09日

  浏览(42)