8-11#去哪儿网app#keep-alive优化网页性能

最新推荐文章于 2023-05-20 06:49:55 发布

Nav1

最新推荐文章于 2023-05-20 06:49:55 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/xinkuIe/article/details/109724207

版权

本文讲述了如何通过Vue的Keep-Alive和生命周期钩子解决网页在城市切换时频繁发送Ajax请求的问题，通过结合mounted和activated函数，实现数据缓存，提高性能并保持城市页面内容同步更新。

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

目前网页的问题：每次点击城市、选择城市、点击城市、选择城市，路由切换时，Ajax都会被重新发送请求：

原因：在Home.vue和City.vue中，每次渲染，mounted钩子都会执行，根据代码，Ajax会被重新获取(axios.get('/api/city.json'))，以Home.vue为例：

methods: {
    getCityInfo () {
        axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc (res) {
        // console.log(res);
        res = res.data
        if (res.ret && res.data) {
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
        }
    },
    handleLetterChange(letter) {
        // console.log(letter);
        this.letter = letter
    }
},
mounted() {
    this.getCityInfo()
}

所以在App.vue中，根据<router-view/>显示的是路由所对应的内容，故在外层包裹<keep-alive>，让路由内容加载过一次后，会保存在内存中，即之后选择城市时，会从内存中调数据，不重新发Ajax请求：

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

但这样的话，当城市改变时，下面的显示内容仍是之前的请求内容(图片内容等)，不会变化。

所以改变城市回到Home的时候发送Ajax请求，但切换到选择城市页面的时候不发送请求，从而达到性能的最优化，是否请求可通过网页的network中看到。办法：结合activated和临时缓冲变量lastCity。

在Home.vue中添加生命周期函数activated，当组件在 <keep-alive> 内被切换，它的 activated (和 deactivated) 这两个生命周期钩子函数将会被对应执行。所以在home和city组件来回切换的时候，mounted只会执行一次，而 activated每次切换都会执行

注意：只有当组件在 <keep-alive> 内被切换，才会有activated 和 deactivated 这两个钩子函数

mounted () {
    this.lastCity = this.city
    this.getHomeInfo()
},
activated () {
    if(this.lastCity !== this.city) {
        this.lastCity = this.city
        this.getHomeInfo()
    }
}

当这次点击的city不等于之前的lastcity时，重新发送Ajax请求即可。

至此，首页和城市页所有功能都实现了。

git : add . \ push \ commit -m 'finish page' \ checkout master \ merge city-keepalive \ push

代码入库！