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 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。

vue 中 keep-alive，activated，deactivated相关推荐

Vue中created()与activated()区别
created():在创建vue对象时,当html渲染之前就触发:但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次: activated():在vue ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
关于Vue中keep-alive的作用是什么？怎么使用？
一.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,该组件将不会销毁. 二.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 三. ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
JS每日一题:vue中keepalive怎么理解？
20190212问 vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue ...
vue window.location.href 返回页面不刷新_前端框架vue中的keep-alive总结实践
Vue keep-alive实践总结是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和相似, 是一个抽象组件 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
vue中的keep-alive的用法详细讲解
问题描述(什么是keep-alive) keep-alive顾名思义,保持活跃.保持谁活跃呢? 首先我们知道,因为vue就是组件化编程,一个.vue文件就是一个组件.就像万事万物一样,都有从出生到消亡 ...
Vue 中 keep-alive 组件与 router-view 组件的那点事
最近项目中有小伙伴找到我,问我"为啥他写的页面第一次进去可以触发 onCreate 函数,第二次再进的时候就不触发了呢?"(因为我们项目是一个大型的项目,每个开发可能只接触到自己开 ...

vue 中 keep-alive，activated，deactivated

keep-alive

activated

deactivated

vue 中 keep-alive，activated，deactivated相关推荐

最新文章

热门文章