keep-alive

        在组件反复切换时，会反复渲染，造成性能问题。用一个 <keep-alive></keep-alive> 标签将他包裹起来，组件会在第一次被创建的时候缓存下来。避免性能问题。

        首先准备好组件，配置好路由。准备了Home,Keep,About三个组件进行切换。

App.vue

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/keep">Keep</router-link> |<router-link to="/about">About</router-link></div><keep-alive><router-view /></keep-alive></div>
</template>
<script>
export default {data() {return {};},
};
</script><style lang="less">
</style>

Keep.vue

<template><div><ul><li v-for="post in posts" :key="post.id" @click="selectedPost = post">{{ post.title }}</li></ul><div><div v-if="selectedPost"><h3>{{ selectedPost.title }}</h3><div v-html="selectedPost.content"></div></div><strong v-else> 点击标签 </strong></div></div>
</template>
<script>
export default {data() {return {posts: [{id: 1,title: "第一个标签",content: "第一个标签内容",},{id: 2,title: "第二个标签",content: "第二个标签内容"},{id: 3,title: "第三个标签",content: "第三个标签内容"},],selectedPost: null,};},created() {console.log('created');},activated() {console.log('activated');},mounted() {console.log('mounted');}
};
</script>

 

 

         在Keep组件中有三个标签，点击标签会变成

         如果不加<keep-alive></keep-alive> 标签，跳转到其他组件再跳转回Keep组件时，之前选择的内容不会被缓存，会显示

 

         加<keep-alive></keep-alive> 标签，再次跳转回来时，之前缓存的内容会被保存。

activated

        被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。

        在不加<keep-alive></keep-alive> 标签时，并不会调用activated：

        加上<keep-alive></keep-alive> 标签时，created和mounted钩子函数只会调用一次，每次切换到Keep组件，都会执行activated：

 

 deactivated

        被 keep-alive 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。