博客文章鏈接：管中窺Vue
Vue和Angular、React.js的相同點和不同點？
與React的相同：
- 都使用了
Virtual DOM - 提供了響應式和組件化的視圖組件
- 將注意力集中保持在覈心庫，而將其他功能如路由和全局狀態管理交給相關的庫。
與React的區別：
-
組件的響應式渲染
-
React的組件的數據狀態發生變化時，它會以該組件爲根，重新渲染整個組件子樹；而Vue不只去渲染需要渲染的組件。
-
-
HTML+CSS的編寫-
React使用的JSX語法，將HTML、CSS和JS混寫；而Vue使用的是templates模板方式，完全融合與經典的Web技術。
-
與Angular的區別：
- 與
Angular 1對比，Vue的性能更加優越，Angular性能會隨着watcher的增加而變慢，而且Angular中一些watcher會觸發另一個更新，使得“髒檢查循環”可能會運行多次。 -
Angular事實上必須用TypeScript來開發，而且Angular對於TS的支持非常全面，而Vue暫時對於TS的支持還在改進階段。 -
Vue的體積更小，一個包含了vuex + vue-router的Vue項目 (30kb gzipped) 相比使用了這些優化的angular-cli生成的默認項目尺寸 (~130kb) 還是要小得多。
Vue中的MVVM模型？
-
Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦創建綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。 -
ViewModel是Vue的核心，它是Vue的一個實例。Vue實例是作用在某個HTML元素上的，這個HTML元素可以是body，也可以是某個id所指代的元素。DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層DOM元素的變化，當View發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。
v-if和v-show指令有什麼區別？
-
v-show對應的值無論是true還是false，對應Html元素都會存在於瀏覽器的文檔中；而v-if如果是false的話，直接不在文檔中了。
如何阻止Vue中的綁定事件不發生冒泡？
- 可以使用“事件修飾符”來處理事件冒泡，如：
v-on:click.stop阻止事件冒泡或v-on:submit.prevent阻止默認事件。
父、子組件間是如何通信的？
- 在
Vue中，每個組件實例的作用域是孤立的。這也意味着不能（也不應該）在子組件的模板內直接應用父組件的數據。父組件通過Props向子組件傳遞數據，而子組件通過Events向父組件傳遞數據。
非父子層級的組件如何實現通信？
- 簡單的應用場景下，可以使用一個空的
Vue實例作爲中央事件總線。 - 在複雜的情況下，可以考慮使用
Vue官方提供的狀態管理模式——Vuex來進行管理。
什麼是動態組件？它的作用是什麼？
- 通過使用保留的
<component>元素，動態地綁定到它的is特性，我們讓多個組件可以使用同一個掛載點，並可以動態地切換。 - 除此之外，
Vue還提供了keep-alve指令。keep-alive指令允許把切換出去的組件保留在內存中，並保留它的狀態或避免重新渲染。
爲什麼組件中的data屬性的值必須是一個函數？
- 因爲在一個組件被多次引用的情況下，如果
data的值是一個Object的話，那麼由於Object是一個引用類型，所以即使是該組件被多次引用，而其實操作的是同一個對象，最終導致了引用該組件的所有位置都同步的顯示了。