Vue框架誕生於2014年,其作者為中國人——尤雨溪,也是新人最容易入手的框架之壹,不同於React和Angular,其中文文檔也便於大家閱讀和學習。Vue用於構建交互式的Web界面的庫,是壹個構建數據驅動的Web界面漸進式框架,該框架遵循CMD規範,並且提供的設計模式為MVVM模式(Model->View->View-Model)和壹個可組合的組合型組件系統,具有簡單的、靈活的API(接口)。該框架繼承了React的虛擬DOM技術和Angular的雙向數據綁定技術,是壹款較新的功能性框架。
在這裏介紹下什麽是虛擬DOM和雙向數據綁定:
1、虛擬DOM(Virtual DOM),顧名思義,從字面上理解就是虛構的DOM樹,當我們用傳統的原生API或者jQuery去操作DOM時,瀏覽器會從構建DOM樹開始從頭到尾執行壹遍流程。即使計算機硬件壹直在更新叠代,但是操作真實DOM的代價仍舊很昂貴,真實的DOM節點,哪怕是壹個最簡單的div也包含很多屬性,所以頻繁的操作,會導致頁面卡頓,影響用戶的體驗。為了解決這個瀏覽器性能問題,虛擬DOM(Virtual DOM)就被設計出來了,其核心算法是Diff算法。它會將壹次操作過程中對真實DOM所有更新的diff內容保存到本地的壹個js對象中,最終將這個js對象壹次性attach到DOM樹上,通知瀏覽器去執行繪制工作,避免了大量的無謂的計算量。
用js對象模擬DOM節點的好處是:頁面的更新可以先全部反應在js對象上,操作內存中的js對象的速度明顯要快的多。等更新完成後,在將最終的js對象映射成真實的DOM,交由瀏覽器去繪制。(提高了性能,並且運行速度快)
2、雙向數據綁定,在講雙向數據綁定前,我們要想說下單向數據綁定,單向數據綁定,就是把Model綁定到View上,當我們用JavaScript代碼更新Model時,View就會自動更新了(Model-->View)。那麽雙向數據綁定就是,用戶更新了View,Model的數據也會自動被更新(Model<-->View)。什麽情況下用戶可以更新View呢?舉個最直接的例子,填寫表單,當用戶填寫表單時,View的狀態就被更新了,如果此時MVVM框架可以自動更新Model的狀態,那麽就相當於我們把Model和View做了雙向數據綁定。其原理是我們要對input進行value 的屬性綁定(v-bind:value=”...”)將Model中的變量綁定到View上(Model->View)以及當用戶對input進行操作時,進行事件監聽(v-on:input=”...”)將View上的更新傳回Model中(View->Model)從而實現雙向數據綁定,在Vue中,以上操作過於繁瑣,便提供了v-model直接實現雙向數據綁定的效果。
在進行Vue項目開發過程中,我們可以通過script標簽引入式寫法來引入vue或者是nodejs自帶的包管理工具npm安裝vue。並且通過new Vue()進行新建壹個Vue的實例對象,其下有很多屬性,包括el、data、methods、computed、watch等等,el為指向頁面的節點元素,data存儲數據,數據類型包括simple datatype(簡單數據類型)以及complex datatype(復雜數據類型),用插值表達式{{}}顯示,在插值顯示的時候,不需要寫上data,methods內存儲方法,通過fn()的形式調用方法,computed內存儲也是方法,但是其為計算數據,復雜邏輯的應該存儲在computed中,計算屬性是基於它們的依賴進行緩存的,由於computed帶有壹層緩存,所以只有在它的相關依賴發生改變時才會重新運行,而methods則是調用壹次生成壹次,computed中的方法調用時不需要加()的,watch為監聽,監控,監聽data中的屬性值也可以監控對象,存在兩個參數(currentValue當前值和prevValue之前值)。