keep-alive
keep-alive是vue一个内置组件,它重要的功能就是缓存组件,可以让包裹的组件不被销毁,起到缓存的效果,且组件切换时不会对当前组件进行卸载
keep-alive它接受三个参数
- include 字符串或者正则,只有名称匹配的组件会被缓存
- exclude 字符串或者正则,任何名称匹配的组件都不会被缓存
- max - 数字。最多可以缓存多少组件实例。
和它有关的生命周期函数
- activated
- deactivated
这两生命周期用,来得知当前组件是否处于活跃状态。 当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行 被包裹在keep-alive中的组件的状态将会被保留,
HOme页面
<div class="home">
<p>你现在的状态</p>
<input type="text" placeholder="输入框" />
<router-link to="about"> 人气 </router-link>
</div>
about页面
<template>
<div class="about">
<h4>你好</h4>
</div>
</template>
app页面
<template>
<div id="app">
<keep-alive>
<router-view nclude="Home" />
</keep-alive>
</div>
</template>
切换组件时会缓存input框里的数据,让它不会消失