keep-alive使用场景

最新推荐文章于 2024-10-09 15:30:02 发布

文鼎鼎

最新推荐文章于 2024-10-09 15:30:02 发布

阅读量3.3k

点赞数 2

分类专栏： keep-alive 文章标签： vue.js

本文链接：https://blog.csdn.net/killbee365/article/details/107017786

版权

本文详细介绍了Vue中的keep-alive组件的使用，包括基础使用、生命周期钩子、与router-view的配合、2.1.0版本后的变化，以及使用时的注意事项。keep-alive可以用于组件状态的持久化，避免不必要的重新渲染。文章通过实例讲解了如何在不同场景下合理利用keep-alive，包括include和exclude属性的运用，以及在动态路由中的缓存策略。

摘要由CSDN通过智能技术生成

Vue中keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时便可以派上用场了。可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。

PS：与相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

1.keep-alive的基础使用

最基础的一般是结合动态组件去使用：
javascript 代码

<keep-alive>
    <component :is="currentView"></component>
</keep-alive>
new Vue({
    el: '#app',
    data(){
        return {
            currentView: Test //Test为引入的子组件
        }
    }
})

不过此种方式并无太大的实用意义。