vue keep-alive
1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗<keep-alive> <component> <!-- 组件将被缓存 --> </component></keep-alive> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的在使用keep-alive的情况下<keep-alive><router-view></router-view><...
2024-01-10
vue keep-alive不生效
// dataCenter/index.vue<script>export default { name: 'dataCenter'}</script>// App.vue<template> <div id="app"> <keep-alive include="dataCenter"> <router-view /> </keep-alive>...
2024-02-23
Vue keep-alive实践总结
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则...
2024-01-10
Vue.js的keep-alive用法
在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景： 首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。 很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。 这种场景往往会碰到一...
2024-01-10
为什么keep-alive缓存不生效？
关于使用keep-alive缓存页面的问题，是否组件挂载时有进入activated生命周期就说明组件已经缓存了呢？ 我现在页面已经进入activated生命周期缓存了，但是在切换页面时还是会进入unmounted生命周期销毁组件，这有可能是什么原因导致的呢？相关代码：回答：把 :key="$route.fullPath" 去掉，每次切换页面key都更改，那它下面的组件都会重新渲染，包括keep-...
2024-02-23
keep-alive保持组件状态的方法
keep-alive的设计初衷有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问题。其次，切换后组件的状态也会完全丢失。keep-alive的设计初衷就是为了保持组件的状态，避免组件的重复渲染。为...
2024-01-10
vue:使用keep-alive提升性能
不使用keep-alive时候：第一次进入首页发起一次后台请求接口第一次跳转，也第一次发起请求关键来了， 当按下返回键，返回到上一个单文件组件的时候，又请求了一次接口：2个页面的反复跳转：可以看到有时候这是十分没有必要的。本案例发生的原因是首页组件每一次路由重新切换到该组件的...
2024-01-10
nginx keepalive的具体使用
默认http1.1协议的请求头是默认开启keepalive，如图：那什么是keepalive？作用是什么？keepalive是在TCP中一个可以检测死连接的机制，作用是保持socket长连接不被断开，属于tcp层的功能，并不属于应用层。TCP层怎么做到保持长连接的呢？先看keepalive的用法：有三个参数，开放给应用层使用sk->keepalive_prob...
2024-01-10
vue 中的keep-alive实例代码
Vue 实现组件信息的缓存当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。一、在app.vue里<keep-alive> <router-view></router-view></keep-alive>但是这种情况会对所有的组件进行...
2024-01-10
vue 路由 按需 keep-alive
1.把需要缓存和不需要缓存的视图组件区分开思路如下图: 写2个 router-view 出口<keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"> </router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>复制代码在Router里定义好需要缓存的视图组...
2024-01-10
Vue keep-alive缓存和缓存优化
由于 <keep-alive> 中的缓存优化遵循 LRU 原则，所以首先了解下缓存淘汰策略的相关介绍。由于缓存空间是有限的，所以不能无限制的进行数据存储，当存储容量达到一个阀值时，就会造成内存溢出，因此在进行数据缓存时，就要根据情况对缓存进行优化，清除一些可能不会再用到的数据。所以根据缓...
2024-01-10
Vue中keep-alive的两种应用方式
Vue中keep-alive的使用我总结的有两种方式应用：首先简述一下keep-alive的作用，kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候，默认会销毁，当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件，保持原来的状态，此时用keep-alive就可以实现了我创建了两个组件，可以相...
2024-01-10
vue-使用keep-alive优化网页性能
export default{ name: 'Home', data () { return { iconList: [], recommendList: [], swiperList: [], weekendList: [] } }, components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekmend }, methods: {...
2024-01-10vue中keep-alive的用法及问题描述
1.keep-alive的作用以及好处在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。2.keep-alive的基本用法在app.vue中<!-- 缓存所有的...
2024-01-10
vue自带组件keep-alive多层嵌套问题
当我从A页面跳到B页面时需要返回A页面不刷新，可以设置A路由的meta={keepAlive:true}，B路由的meta={keepAlive:false}实现。但是当我需要从A跳到B然后再跳到C，之后C返回B没有问题，但是B返回A的时候A页面刷新了，这个应该怎么解决？回答：可以借助<keep-alive>的include和exclude属性结合路由监听来实现<keep-alive :incl...
2024-03-10vue中keep-alive组件的入门使用教程
一、问题触发并解决最近自己在写vue练习，内容相对简单，主要是对vue进行熟悉和相关问题发现，查漏补缺。简单说下练习的项目内容及问题的产生：练习使用的vue-cli 2.0脚手架搭建，内容就是简单的仿音乐播放app，功能也相对简单，大体就是单页router切换各个专辑列表，点击进入专辑内容页面，单...
2024-01-10
Vue中使用keepAlive不缓存问题
1.查看app.vue文件，这个是重点，不能忘记加（我就是忘记加了keep-alive）12345678<template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-...
2024-01-10
vue3.x keep-alive如何动态的缓存
如图页面所示，如何对keep-alive缓存的页面，进行取消缓存，是否可以动态的设置include，或者其他类似实现的方法。...//template<keep-alive :include="data.tabs.map(itm => itm.name).join(',')"> <router-view /></keep-alive>//scriptconst data =...
2024-02-24
vue2 中使用 keep-alive 不生效？
我在输入框输入内容后切换到下一个路由在切换回来输入框的值应该是还在才对呀，用了keepAlive缓存组件好像有生效但是组件还是会销毁重新渲染这点我很疑惑，然后activated两个缓存钩子也有调用，希望大佬给我解解疑惑！！回答：你应该考虑一下，router-view渲染的路由配置的name是否和组件的name一致，如果不一致的化keep-alive是不生效的。Vue3的方案解决方案参考：htt...
2024-02-23vue缓存的keepalive页面刷新数据的方法
用到这个的业务场景是这样的：a页面点击新建列表按钮进入到新建的页面b，填写b页面并点击b页面确认添加按钮，把这些数据带到a页面，填充到列表（数组），可以添加多条，点击这条的时候进入到编辑页面，确认修改之后，回退到a页面，a页面需要更新这条数据实现这个功能的时候，由于是路由...
2024-01-10
从源码角度来回答keep-alive组件的缓存原理
今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。官方API介绍和用法<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 <keep-aliv...
2024-01-10
vue 后退不刷新，前进刷新 keep-alive
最近在开发中遇到了这样的一个问题：A、B、C三个页面，有如下这样的场景：（1）从页面A离开进入B或C的时候，缓存A页面的数据，并且返回到A后，能保持A页面的跳转前职位（2）离开B进入C的时候，缓存B（3）离开B进入A的时候，不缓存现在开始分步解决：方案一：从场景中可是看出A、B是需要缓...
2024-01-10
vue内置组件keep-alive事件动态缓存实例
在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>在路由中配置 { path: '/backstage', component: resolve => require(['@/views/backstage/my'], reso...
2024-01-10
为什么设置了keep-alive，页面还是被刷新了
router.jsapp.vue要缓存的页面 clfRegister回答：你在router-view上使用了v-if指令，当路由切换，$route.meta.keepAlive就会更具true or false 来销毁当前组件，所以每次路由切换，组件 clfRegister 其实都被创建销毁了，所以才会触发你的 create 生命周期...
2024-03-06
vue keep-alive 动态删除组件缓存的例子
业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。实现：1、先在store的state里面设置一个要缓存数组2、在进到子页面的时候，更新store的数组，把将要缓存组件的name(注意：是组件的name，并不是路由的name)，装进数组3、当前组件的route-vie...
2024-01-10
