(五)keep-alive与activated

本节知识点

  • (1) keep-alive
  • (2)activated

使用详情

(1)keep-alive

keepalive主要是缓存,当有些页面不需要来回收发包,1次就可以的时候。我们用keepalive标签。这样保证了他只执行1次收发包

<keep-alive>
      <router-view />
    </keep-alive>
(2)activated配合keepalive一起使用

有的时候我们有的页面需要重新刷新请求包,而有的页面不需要。所以我们就需要利用钩子函数来解决
mounted只执行一次。而activated只要页面切换加载组件就会执行一次

  // 这个必须和keepalive配合这样能更改数据,mounted只执行一次,actived只要页面渲染就执行一次
  activated () {
    if (this.oldcity !== this.city) {
      this.oldcity = this.city
      axios.get('/api/index.json?city=' + this.city).then(this.getdata)
    }
    console.log('actived')
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue去哪网跟学笔记 记录学习点滴 1. 初始化项目 1.1 手机显示配适 minimum-scale=1.0,m...
    noobakong阅读 2,330评论 0 16
  • keep-alive keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个...
    羊烊羴阅读 232,859评论 7 103
  • 这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化...
    烈风裘阅读 77,281评论 29 91
  • HTTP Keep-Alive 在http早期,每个http请求都要求打开一个tpc socket连接,并且使用一...
    jiangmo阅读 4,799评论 0 2
  • 我一直都不知道怎么跟我的家里人开口说我跟他的事,可是这一切随着时间的推移我变得越来越不知所措,我不知道怎么...