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

最近在仿网易云项目的时候，做到歌手列表页面，点击不同分类，加载对应的歌手，发现数据不更新，最后发现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-Notes

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