vue父页面数据传递给子组件之后,页面数据一直不刷新,不会变,这让我很郁闷,最后发现是vue组件缓存的问题,给组件加了唯一key之后,数据刷新又慢一拍,第二次点击显示上一次的数据。窝草,心态崩了,那么如何解决这个缓存呢?
【已解决】vue组件内部数据有缓存,不会自动实时更新!-Qui-Note

最近在仿网易云项目的时候,做到歌手列表页面,点击不同分类,加载对应的歌手,发现数据不更新,最后发现vue组件自带缓存,数据都没有传递到组件内,如何解决?

解决思路

vue在绑定数组循环的时候,避免数据重复引入了唯一关键词key,然后我也动态模拟一个key,绑定给组件,让组件刷新:

父页面:

<uiArtist :artists="artists" :key="onlyCodeA"></uiArtist>

切换事件中:

this.onlyCodeA = this.onlyCodeA + a + '-' + b + '*' + c

当然,我abc是动态的,每次都不一样,你也可以获取一下点击的层次和所对应数据的id当动态参数。

这样做之后,数据会刷新了,但是组件的数据是上一次点击对应的列表数据,换句话说,数据加载慢一拍,说明成功了一半,数据传递进数组里面了!

要是组件能监听到数据变化就好了,突然蹦出一个这样的想法,watch,不就是为解决监听数据变化而生的嘛?

子组件:

watch: {
    'artists': function (val, oldVal) {
      if (val !== oldVal) {
        this.loadRank()
      }
    }
},

artists是组件props的动态参数,我监听这个参数就ok了,两次的值不一样,就刷新重新加载数据,oh!我这该死的小聪明,还是实现了!最终效果:

【已解决】vue组件内部数据有缓存,不会自动实时更新!-Qui-Note

哎,其实网上的教程不少,但是都是老过时,或者复制拷贝的,用处不大,只能作为解决问题的“引火线”,别人遇到的问题,有可能就不是咱刚好遇到的!所以啊,还是学会自己找方法毕竟好!