1. 程式人生 > >vue.js初級教程--01.簡介

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

vue.js node.js webpack npm

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.簡介