在開發(fā)類似文章詳細(xì)的功能時(shí)候，url像是這樣的 /article/1002,article是一個(gè)詳細(xì)文章的組件，通常的做法是，在created里面執(zhí)行methods的getDetail(id)的方法，來第一次讀取數(shù)據(jù)，那這樣在其他組件跳轉(zhuǎn)過來，相當(dāng)于重載組件，渲染數(shù)據(jù)是沒問題的。當(dāng)時(shí)有一個(gè)常見的場(chǎng)景，當(dāng)你的文章詳細(xì)內(nèi)引用了相同文章的鏈接，或者是推薦閱讀，由于使用了相同的組件，只是路由參數(shù)發(fā)生了變化，而數(shù)據(jù)并沒有被更新。這是因?yàn)樵诋?dāng)前組件內(nèi)，created方法里面的getDetail只執(zhí)行了一次，就不再執(zhí)行了。為了解決這個(gè)問題，首先是想到了，計(jì)算屬性computed，因?yàn)閏omputed類似一個(gè)watcher，可以監(jiān)聽數(shù)據(jù)變化而執(zhí)行響應(yīng)的更新。代碼像這樣：

 computed: {
            newRender:function(){
            this.id = this.$route.params.id
            //獲取上方數(shù)據(jù)列表
            this.getData(this.id);
            //獲取tab研究數(shù)據(jù)
            this.getResearch(this.id);
            //設(shè)置默認(rèn)tabview為研究
            this.tabView = 'research';
            this.getStockStatus(this.id);
            window.addEventListener('scroll', _.debounce(this.showGoTop, 500));
            return this.id
            }
        },
        created() {
            

        },

為了能讓newRender方法能夠被使用，在文檔中我們會(huì)看到類似這樣的{{newRender}}，這樣寫更像是在顯示一個(gè)數(shù)據(jù)，事實(shí)上也可以不顯示數(shù)據(jù)。
那為了使這個(gè)寫法沒有違和感，我將他綁定在一個(gè)元素的屬性上比如view-id="newRender"：

 <div class='stock-contain' :view-id="newRender">

到此可以從代碼上很簡(jiǎn)潔的實(shí)現(xiàn)數(shù)據(jù)刷新，但是性能寫法的科學(xué)性，還沒有驗(yàn)證，本來以為這個(gè)事情，應(yīng)該是vue-router可以預(yù)先處理的，但是并沒有實(shí)現(xiàn)獲或許也沒有找到方法。