vue解决多页面组件使用keep-alive而mounted不能多次触发问题

一、需求问题

在vue的开发中，我们可能会遇到这样的需求。当在多个页面组件进行切换的时候，并且页面组件使用了Keep-alive的情况下，如果使用mounted()钩子函数去做页面的数据请求，那么只会触发一次。如果下次一些相关的定位信息发生了改变，再次切换页面组件的时候，相关的页面不会再重新发起数据请求，跟随相关的定位信息发生改变。

二、需求分析

在vue中，keep-alive是能够缓存动态组件的，应用页面也是比较多的。但是如果在切换多页面组件，同时相关定位信息发生改变，数据请求只会请求一次，然后就会被缓存了。这并不是我们所需要的结果。所以，在keep-alive中，有两个钩子函数，activated()和 deactivated() 这两个钩子函数。activated()是keep-alive 组件激活时调用，而 deactivated() 是 keep-alive 组件停用时调用。所以，我们可以使用 activated() 代替 mounted(), 去作为页面组件切换时使用，进行数据的请求。

三、需求解决

将 mounted() 替换为 activated()

activated() {

        this.axios.get('/api/movieComingList?cityId='+cityId).then((res) => {
            var  msg = res.data.msg;
            if ( msg === 'ok') {
                this.comingList = res.data.data.comingList;
                this.isLoading = false;
            }
        })
    }