1. Keep-aliveは、Vueが提供する組み込みコンポーネントであり、非アクティブなコンポーネントインスタンスを破棄するのではなくキャッシュします。ラベルとして使用され、キャッシュする必要のあるコンポーネントの外部にラップされます。
2.コンポーネントの切り替えプロセス中は切り替えられたコンポーネントをメモリに保持して、DOMレンダリングの繰り返しを防ぎ、読み込み時間とパフォーマンスの消費を減らし、ユーザーエクスペリエンスを向上させます。
3.機能：たとえば、リストページに詳細が入力されたときに、リストのスクロール位置を保存したい場合、keep-aliveを使用してリストページのスクロール位置を保存できます。
4.コンポーネントがkeep-aliveを使用した後、2つの新しいライフサイクルactived（）deactived（）が追加されます
activated 被缓存的组件激活时调用。
deactivatedキャッシュコンポーネントが非アクティブ化されたときに呼び出されます。
<template>
<div class="maxBox">
<div ref="list" @scroll="alive" class="content-list">
<li v-for="(v, i) in 100" :key="i">{
{ v }}</li>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
scrollPages: 0, // 缓存当前滚动条的位置
};
},
mounted() {},
methods: {
alive(e) {
console.log(e.target.scrollTop);
// 获取页面滚动条的位置
this.scrollPages = e.target.scrollTop;
},
},
activated() {
// 缓存组件激活时调用
this.$refs.list.scrollTop = this.scrollPages; // 获取 dom 的scrollTop = 缓存的滚动条位置
},
};
</script>
<style lang="scss">
.maxBox {
width: 100%;
height: 100%;
}
.content-list {
width: 100%;
height: 100%;
overflow-y: scroll;
li {
width: 100%;
height: 20px;
background-color: #ccc;
margin: 20px 0;
display: flex;
}
}
</style>
app.view
<template>
<div id="app">
<!-- include 指定要缓存的页面， Home 页面要有配置name:Home。
要想缓存多个以 , 分割后面跟组件名字 -->
<!-- exclude 指定不需要缓存的页面 -->
<keep-alive include="Home,About">
<router-view />
</keep-alive>
<!-- 数组 -->
<!-- <keep-alive :include="['Home','About']">
<router-view />
</keep-alive> -->
<!-- 正则 -->
<!-- <keep-alive :include="/Home|About/">
<router-view />
</keep-alive> -->
<footer>
<router-link to="/">页面一</router-link>
<router-link to="/About">页面二</router-link>
</footer>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {},
methods: {},
components: {},
};
</script>
<style lang="scss">
// 要给父元素设置高100%否则不生效
body,
html,
#app {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
footer {
width: 100%;
height: 40px;
border-top: 1px solid #ccc;
position: fixed;
bottom: 0;
background-color: #fff;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
Moは白人の男の子を待っています、頭は空で悲しいです--s --z -h