在开发类似文章详细的功能时候，url像是这样的 /article/1002,article是一个详细文章的组件，通常的做法是，在created里面执行methods的getDetail(id)的方法，来第一次读取数据，那这样在其他组件跳转过来，相当于重载组件，渲染数据是没问题的。当时有一个常见的场景，当你的文章详细内引用了相同文章的链接，或者是推荐阅读，由于使用了相同的组件，只是路由参数发生了变化，而数据并没有被更新。这是因为在当前组件内，created方法里面的getDetail只执行了一次，就不再执行了。为了解决这个问题，首先是想到了，计算属性computed，因为computed类似一个watcher，可以监听数据变化而执行响应的更新。代码像这样：
computed: {
newRender:function(){
this.id = this.$route.params.id
//获取上方数据列表
this.getData(this.id);
//获取tab研究数据
this.getResearch(this.id);
//设置默认tabview为研究
this.tabView = 'research';
this.getStockStatus(this.id);
window.addEventListener('scroll', _.debounce(this.showGoTop, 500));
return this.id
}
},
created() {
},
为了能让newRender方法能够被使用，在文档中我们会看到类似这样的{{newRender}}，这样写更像是在显示一个数据，事实上也可以不显示数据。
那为了使这个写法没有违和感，我将他绑定在一个元素的属性上比如view-id="newRender"：
<div class='stock-contain' :view-id="newRender">
到此可以从代码上很简洁的实现数据刷新，但是性能写法的科学性，还没有验证，本来以为这个事情，应该是vue-router可以预先处理的，但是并没有实现获或许也没有找到方法。
