之前寫的vue專案，有個問題困擾了好久。新聞板塊有推薦、精華、最新等幾個tab，設想通過切換tab，改變路由引數（get/news/:tab）去獲取對應資料，然後渲染到頁面（用的是同一套元件），問題來了：當切換tab時，資料並沒有更新，後來看了vue-router官網，有這麼一句話：提醒一下，當使用路由引數時，例如從/user/foo導航到user/bar，原來的元件例項會被復用。因為兩個路由都渲染同個元件，比起銷毀再建立，復用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。意思很明顯了：雖然路由引數發生了變化，但元件還是那個元件，vue生命週期也還沒結束，此時並不會重新整理資料。（個人認為，開發spa頁面，一切都是以路由為起點的，路由變化，頁面跟著變化，復用元件竟然會影響到路由，很難受！！）
不過，官網也提出了相應的解決方案：復用元件時，想對路由引數的變化作出響應的話，你可以簡單地 watch（監測變化）$route物件：
const user =}}
今天，在逛社群的時候，又遇到這個『』攔路虎『』以及乙個非常新穎的解決方案，相信不少人在看vue官方文件的時候，對這句話有過疑問：用 :key管理可復用的元素（這句話出自條件渲染 v-if部分），如何管理，官網也給了演示（我第一次看的時候，好像是沒有的例子的） 這個例子讓我對v-if又有了不同的看法：以前認為v-if是動態的生成/去除元素，仔細看例子，會發現：模板相同，會造成一種「復用」的感覺（v-if和v-else的模板是一樣一樣的），也就是說，資料更新之前，會先比較模板先後的異同，再決定是否跟新資料，並不是先更新資料，再重新整理模板。 對:key的詳細解讀來自知乎：
上面的思考題其實跟我遇到的問題是一致的，自己進入了乙個誤區：vue是資料驅動的，這句話是絕對沒有問題的，但他不是『金科玉律』，vue的底層實現應該是：通過比較模板先後的異同，再決定是否跟新資料（個人拙見，輕噴）。
回到正題，：key是用來阻止「復用」的。vue 為你提供了一種方式來宣告「這兩個元素是完全獨立的——不要復用它們」。只需新增乙個具有唯一值的key屬性即可(vue文件原話)
那麼，給新增乙個key，能不能解決這個問題呢？答案是可以的（廢話-_-||） 可以這樣來：
computed:
}
使用computed屬性和date()可以保證每一次的key都是不同的，這樣就可以如願重新整理資料了。
對這個問題的研究就先到這裡了，以後遇到新的方案，會繼續補充
----2017.06.22 22：53
vue 中怎麼監聽路由的變化
1 在乙個元件裡面 mounted methods replace替換原路由，作用是避免回退死迴圈 vue router 路由原理 在解析原始碼前，先來了解下前端路由的實現原理。前端路由實現起來其實很簡單，本質就是監聽 url 的變化，然後匹配路由規則，顯示相應的頁面，並且無須重新整理。目前單頁面使...
vue通過watch監聽資料變化
一 通過watch來監聽資料變化，並通過列印顯示 personal center text placeholder 請輸入 v model inputval export default watch 效果圖 二 首次渲染開啟監聽 按上面的 實現，網頁眉次渲染是不會啟動監聽的，如果我們需要第一次渲染變...
vue中監聽資料變化 watch
今天做專案的時候，子元件中資料 原本固定的資料 需要父元件動態傳入，如果一開始初始化用到的資料 但當時還沒有獲取到，初始化結束就不會更新資料了。只有監聽這兩個屬性，再重新執行初始化。1 watch是乙個物件，物件就有鍵跟值，鍵就是我們要監聽的資料，值可以是函式 當我們監聽的資料發生變化時，需要執行的...