vue.js初級教程--01.簡介
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.簡介