管中窺Vue

博客文章連接：管中窺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是一個引用類型，因此即便是該組件被屢次引用，而其實操做的是同一個對象，最終致使了引用該組件的全部位置都同步的顯示了。