Vue使用keep-alive来提高网页的性能

A cold winter

于 2019-12-25 14:46:12 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js基础

本文链接：https://blog.youkuaiyun.com/qq_41611820/article/details/103698910

Vue.js基础专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用Vue的keep-alive组件提升网页性能，通过缓存已访问组件避免重复请求，同时讨论了在数据变化时如何触发重新加载的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用keep-alive标签来提高网页的性能，把一些已经访问过的组件内容存储在内存中，不用每次渲染的时候都要发送ajax请求。

<keep-alive>
     //显示当前路由地址对应的内容
     <router-view/>
    </keep-alive>

但是有的页面需要在用户的操作后数据发生变化，所以当使用keep-alive标签的时候，vue生命周期中会出现一个activated的函数,需要数据发生变化的时候就重新发送一次ajax请求

activated(){
    //当选择的城市与上一的城市不相同的时候，重新发送ajax请求
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }