标签：版本 激活 include size nts 信息 字符 one ber
keep-alive：是vue内置的一个组件，可以使被包含的组件保留状态或避免重新渲染。有两个生命周期函数：activated、deachtivated。在vue 2.1.0版本后新增了两个属性：include与exclude。
生命周期函数（在服务端渲染时，以下两个钩子函数不会被调用）
activated：在 keep-alive 组件激活是调用。如果每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子函数中获取数据的任务
deachitivated：在 keep-alive 组件停用时调用。
属性
include：
类型：字符串(include="") 或 表达式（使用 v-bind:include=""）
作用：只有名称匹配的组件才会被缓存
exclude（优先级 > include）：
类型：字符串(exclude="") 或 表达式（使用 v-bind:exclude=""）
作用：任何名称匹配的组件都不会被缓存
max：
类型：Number
作用：最多可以魂村多少组件实例
组件缓存实例
// 新增一个组件： export default { name: ‘test-keep-alive‘, data () { return { includedComponents: "test-keep-alive" } } } // 实例： <keep-alive include="abc"> <!-- 将缓存组件名 = abc 的组件 --> <component></component> </keep-alive> <keep-alive include="a,b"> <!-- 结合动态组件，将缓存name为a或b的组件 --> <component :is="a"></component> </keep-alive> <!-- 使用正则表达式，需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 动态判断 --> <keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive> <keep-alive exclude="test-keep-alive"> <!-- 将不缓存name为test-keep-alive的组件 --> <component></component> </keep-alive>
页面缓存实例（结合 vue-router）
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
// 在router的index.js中配置 meta 元信息
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘Hello‘,
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: ‘/page1‘,
name: ‘Page1‘,
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
生于忧患，死于安乐
标签：版本 激活 include size nts 信息 字符 one ber
原文地址：https://www.cnblogs.com/jingxuan-li/p/11828776.html
