一个网站需要多少钱广东seo网站推广
一、什么是keep-alive？
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
二、keep-alive的优点？
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
三、keep-alive有三属性
include - 字符串或正则表达，只有匹配的组件会被缓存
max-数字，最多可以缓存多少组件实例
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
代码
<keep-alive include="home"><router-view />
</keep-alive>
//这串代码表示home组件会被缓存，而其他路由没配置就不会被缓存
四、keep-alive的使用会触发两个生命周期函数?
- activated 在keep-alive组件激活之前也就是当显示组件时触发
- deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发
五、使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存
{path: 'list',name: 'itemList', // 列表页component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '列表页'}
}
使用 <keep-alive>
<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
六、缓存后如何获取数据
解决方案可以有以下两种：
- beforeRouteEnter
- activated
beforeRouteEnter
每次组件渲染的时候，都会执行beforeRouteEnter
beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData() // 获取数据})
},
activated
在keep-alive缓存的组件被激活的时候，都会执行activated钩子
activated(){this.getData() // 获取数据
},
注意：服务器端渲染期间acvtived不被调用。