part8 vue内置标签keep-alive对网页性能优化

我们网页请求时候 我们点击路由切换

可以看network中数据请求

因为每次路由切换都会执行mounted钩子函数 我们这个函数中数据请求

//每次切换路由,页面都会重新渲染

 

在根组件中使用 路由切换 标签包裹

 

<keep-alive>
    <router-view/>
</ keep-alive>

包裹的内容会被缓存

//这样又一个弊端  我有的页面是需要重新进入发送请求的

这个标签带来一个新的生命周期函数

在此进入同一个一面会调用 activited生命周期函数(页面重新显示)

写一个判断  
页面改变时候  内容更改 就再次发送ajax

 2.知识点 可以通过路由传递参数

    getHomeInfo () {
      this.axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    },   //传递了一个city的变量

 //总结(!important

// 比如一共两个页面 A和B  A为首页
我们从B页面进入A页面要判断一下  B进A时候会改变A页面内容
那么我们就要把之前第一次进入A页面时候数据作为一个储存
当再次进入的时候 在函数acitivated函数中比较

 

posted @ 2020-02-15 20:24  容忍君  阅读(306)  评论(0)    收藏  举报