好程式設計師Web前端教程分享Vue學習心得

　　 好程式設計師 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 。