化繁為簡的wathchers:

常見的需求是元件建立時我們要獲取一次列表，同時監聽data中的資料改變也要重新獲取一個列表，

但是這麼寫又太冗餘了。

created(){
    this.fetchPostList()
},
watch:{
    id(){
        this.fetchPostList()
    }
}

有什麼方法可以簡單一點？

首先，在watchers中，可以直接使用函式的字面量名稱；其次，宣告immediate:true， 表示建立的時候立馬執行一次。

watch:{
    data:{
        hander:'fetchPostList',
        immediate:true
    }
}
 

元件複用常見的bug

首先，我們預設是使用Vue-router來實現路由的控制

假設我們寫一個部落格網站，需求是從/post/a轉變到/post/b，然後我們驚人的發現，頁面跳轉後的資料居然沒重新整理，原因是vue-router智慧的發現這是同一個元件，然後它就決定複用這個元件，所以在create中寫的方法全部沒執行，所以，資料沒有重新整理。通常的解決方案是監聽 $route的變化來初始化資料。

但是，這種方式問題是解決了，但是處理方式不太優雅。我們希望這麼寫：

data(){
    return {
        lodding:true,
        erroe:false
    }
},
create(){
    this.getPost(this.$route.params.id)
},
methods:{
    getPost(postid)
}
 

那麼要怎樣才能達到這樣的效果呢？答案是為rouer-view新增一個唯一的key ，這樣vue-rouer就不會複用元件從而導致create函式中的方法不執行了。

<router-view :key="$route.fullpath"></router-view>