缓存所有页面
根据条件缓存页面
1.在 router 目录下的 index.js 文件里
1. activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用
2. deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用
被包凯瞎含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才盯搭空会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依枝者然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 可以设置以下 props 属性：
关于 keep-alive 的基本用法：
使用 includes 和 exclude ：
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件纳皮巧，会多出两个生命周期钩子（ activated 与 deactivated ）：
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive
举个栗子:
当我们从 首页 –>列表页 –>商详页 –>再返回 ，这时候列表页应该是需要 keep-alive
从 首页 –>列表页 –>商详页 –>返回到列表页(需要缓存) –>返回到首页(需要缓存) –>再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive
在路由中设置 keepAlive 属性判断是否需要缓存
使用 <keep-alive>
keep-alive 是 vue 中内置的一个组件
源码位置：src/core/components/keep-alive.js
可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数
this.cache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：
在组件销毁的时候执行 pruneCacheEntry 函数
在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：
如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：
在该函数内对 this.cache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可
关于 keep-alive 的最强大缓存功能是在 render 函数中实现
首先获取组件的 key 值：
拿到 key 值后去 this.cache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：
直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 this.keys 中最后一洞键个
this.cache 对象中没有该 key 值的情况，如下：
表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 this.cache 中，并且把 key 存入 this.keys 中
此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ，如果超过了，则把第一个缓存组件删掉
解决方案可以有以下两种：
每次组件渲染的时候，都会执行 beforeRouteEnter
在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子
注意：服务器端渲染期间 avtived 不被握铅调用
最近在学习Vue.js，把自己遇到的问题做个记录，所以，今天添加一点小笔记。在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中...
第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的
v-if
来判断请求的数据是否返回...
<div
class="container"
id="app"
v-cloak>
<div
v-if='moneyInMsg.uuid'>
<in-account-msg
:money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
这里的
v-if
=
'moneyInMsg.uuid'
就是来判断数据有没有请求回来，如果请求回来就让他显示，没有请求到数据，就让他loading，这样体验就会好很多。在这里还需要注意的是，v-if判断的数据源，是数据返回的字段，如果两个字段只能存在其一的话，可以v-if
='a
||
b'
来判断数据是否成功的返回；还要注意的一点是，不能直接在组件里用v-if判断，也不能直接在根标签里判断，直接嵌套一个div就可以解决，并不影响样式，只做数据是否正常返回的显示作用；
第二个就是在使用vuex时，有数据缓存；我遇到的情况是，在列表页点击进入详情页，返回到列表页，在进入另一个详情页的时候，数据会显示之前的数据，同时页面还在loading（接口返回笑桥的数据比较慢），过一会数据返回的时候，才重新渲染页面。可能是自己对vuex理解的不够深入，没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题，但是不够zhuang,但是解决了问题，后期再做优化。
在之前解决的方案中，是进入页面的时候，重新刷新页面，重新请求数据，代码如下：
export
const
refresh
=
(title)
=>
{
document.title
=
title
let
iframe
=
document.createElement('iframe')
iframe.src
=
require('./mm.jpg')
iframe.setAttribute('style',
'display:none')
let
loadFn
=
function
()
{
iframe.removeEventListener('load',
loadFn)
document.body.removeChild(iframe)
console.info('Page
Title
IS
'
+
title)
iframe
=
null
loadFn
=
null
}
document.body.appendChild(iframe)
iframe.addEventListener('load',
loadFn)
}
但是没有达到预期的效果，碰升猛依然会出现上面的情况...
丫的,抓狂了...（被别人催的感觉真的不爽...）
百度啊，google啊，都没有遇到这种情况的？找到一个，还是提问的，没有回答的，好吧，还是靠自己。自笑悔己动手，丰衣足食啊...
思路是，定义一个参数status为false，当数据没有请求回来，就不显示，也是用上面的方式来判断，一直loading（请求失败，去掉loading），当数据返回的时候，让status为true；使用$nextTick来更新数据...
贴上自己部分的代码作为参考:
<template>
<div
v-if='status
&&
order.name'>
//页面展示的数据
</div>
</template>
<script>
export
default{
data(){
return
{
status：false
}
},
created(){
var
_this
=
this
this.setDd({res
=>{
_this.$nextTick(function(){
_this.status=
true
})
}})
},
computed:{
...mapGetters({//getter获取的数据})
},
methods:{
...mapActions(['setDd'])
//获取数据的方法
}
}
</script>
处理的方式比较丑陋...,但是实现了想要的效果；这里注意一点就是v-if的判断问题。（v-if='status
&&
order.name'）这个用了并且，目的是有数据返回，才能让他显示，如果没有数据，会显示静态的值，数据都为underfind...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）