好程式員Web前端教程分享Vue學習心得，Vue是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動。Vue+webpack也成了很多開發項目的标配。在學習的過程中也碰到了很多坑，在這裡分享下自己學習的一些心得。
Vue是元件化的，每一個部分都可以做成一個元件，但是這裡就出現了一個問題，就是元件之間如果涉及到傳值問題，就會比較麻煩。如果涉及到兄弟元件的傳值，我們可以給Vue執行個體上挂載一個$bus屬性
之後可以通過this.$bus.$emit來推送資料，this.$bus.$on來接收資料。
Vue本身并不鼓勵使用DOM操作(并不是不能)，如果你希望擷取到節點，那麼可以通過ref屬性做到。
然後可以通過this.$refs通路到所有具有ref屬性的節點。
如果你希望擷取input的value值，你還可以通過v-model屬性做到。V-model實際上實作了資料的雙向綁定。把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。如果使用者更新了View，Model的資料也自動被更新了，這種情況就是雙向綁定。什麼情況下使用者可以更新View呢?填寫表單就是一個最直接的例子。當使用者填寫表單時，View的狀态就被更新了，如果此時MVVM架構可以自動更新Model的狀态，那就相當于我們把Model和View做了雙向綁定。Vue是采用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出消息給訂閱者，觸發相應的監聽回調來實作資料的雙向綁定的。
Vue本身提供了特有的計算屬性computed。經常有人會分不清computed和watch。關于computed和watch的比較，computed是計算屬性，會被混入到Vue執行個體中，計算屬性具有依賴性，如果依賴的那個數值沒有發生改變，那麼就會執行一次，除非依賴發生改變，它才會重新開始計算。watch是觀察屬性，Vue将會在執行個體化的時候調用watch，周遊watch對面的每一個屬性，當其中屬性發生變化時，都會觸發watch。以上兩種都不能使用箭頭函數來定義，因為箭頭函數是綁定了父級作用域的上下文，此時的this并沒有指向Vue執行個體。
另外一個容易弄混的是指令v-if和v-show。兩者的差別是，v-if和v-show都能夠控制元件的顯示和隐藏，差別在于v-show為false的時候頁面加載的時候就會把元件加載進來，隻是把元件的display屬性設定為none而已，然後v-if為false的，元件是不會加載進來的，隻有當值為true的時候才會把元件加載進來，是以實作按需加載就可以使用v-if，隻是控制元件的顯示隐藏就可以使用v-show。