Vue特點

• 漸進式框架

  • 采用自底向上增量開發的設計

  • 核心庫只關註視圖層

• 輕量級

  • 22kb min+gzip

• 高性能

  • 渲染性能：支持條件、循環、服務端渲染方式

  • 更新性能：數據驅動、響應式

特性

• 數據驅動,支持雙向數據綁定，異步批量DOM更新

• 組件化,支持組件獨立、組件復用以及異步加載

• 模塊化,模板、數據、外數據、方法、生命周期函數、樣式

• 指令,支持內置指令和自定義指令

虛擬DOM

為什麽需要虛擬DOM

DOM是很慢的，其元素非常龐大，頁面的性能問題鮮有由JS引起的，大部分都是由DOM操作引起的。如果對前端工作進行抽象的話，主要就是維護狀態和更新視圖；而更新視圖和維護狀態都需要DOM操作。其實近年來，前端的框架主要發展方向就是解放DOM操作的復雜性。

在jQuery出現以前，我們直接操作DOM結構，這種方法復雜度高，兼容性也較差；有了jQuery強大的選擇器以及高度封裝的API，我們可以更方便的操作DOM，jQuery幫我們處理兼容性問題，同時也使DOM操作變得簡單；但是聰明的程序員不可能滿足於此，各種MVVM框架應運而生，有angularJS、avalon、vue.js等，MVVM使用數據雙向綁定，使得我們完全不需要操作DOM了，更新了狀態視圖會自動更新，更新了視圖數據狀態也會自動更新，可以說MMVM使得前端的開發效率大幅提升，但是其大量的事件綁定使得其在復雜場景下的執行性能堪憂；有沒有一種兼顧開發效率和執行效率的方案呢？ReactJS就是一種不錯的方案，雖然其將JS代碼和HTML代碼混合在一起的設計有不少爭議，但是其引入的Virtual DOM(虛擬DOM)卻是得到大家的一致認同的。

理解虛擬DOM

虛擬的DOM的核心思想是：對復雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操作。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想

(1) 提供一種方便的工具，使得開發效率得到保證 (2) 保證最小化的DOM操作，使得執行效率得到保證

本文出自 “徐天友” 博客，請務必保留此出處http://mariocoding.blog.51cto.com/6328404/1961086

vue.js初級教程--01.簡介