本文转载于：https://blog.csdn.net/xum222222/article/details/80322532
转载仅供个人日后学习
https://www.cnblogs.com/jinzhenzong/p/7885643.html
keep-alive的作用主要是在组件切换时，保存组件的状态，防止重复渲染引发性能问题。比如：常见的列表页与详情页，当我们在列表页通过滚动鼠标寻找到自己感兴趣的标题时，点进去进入详情页，当浏览完详情页后返回到列表页，此时我们希望返回的列表页不是重新渲染后的列表页，而是我们之前滚动到的位置，keep-alive 就可以帮助我们缓存列表页的状态，实现上述效果。keep-alive起到一个缓存作用，用来保存页面的状态（包括数据、操作等）。
demo实践，感受keep-alive的作用
demo中定义了两个组件，Page1和Page2。并通过路由实现了两个组件之间的切换。在page1页面的输入框中输入一些内容后，切换到page2页面，再从page2重新切换到page1时，通过keep-alive可以实现输入框中的内容保持不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>keep-alive</title>
</head>
<body>
<div id="app">
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const Page1 = Vue.extend({
template: `<div class="page1">
<h1>page1</h1>
<input type="text" />
</div>
`,
})
const Page2 = Vue.extend({
template: `<div class="page2">
<h1>page2</h1>
</div>
`,
}) const routes = [
{
path: '/page1',
component: Page1,
meta: {
keepAlive: true,
}
},
{
path: '/page2',
component: Page2,
meta: {
keepAlive: false,
}
},
] const router = new VueRouter({
routes,
}) const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
---------------------
- 代码copy到编辑器中保存为.html文件，用浏览器打开观察结果。
上述demo中，通过在路由时，为组件Page1和Page2设置meta的keepAlive状态来控制组件是否需要缓存。