前端主流框架Vue工作原理及特性你了解嗎？

前端主流框架Vue工作原理及特性你了解嗎？Vue類(lèi)做的是一個(gè)翻譯的工作。對(duì)于一些常用操作原生的js需要寫(xiě)很多東西，進(jìn)行很多復(fù)雜的操作，因此用了Vue這個(gè)翻譯，告訴他一些簡(jiǎn)單的命令，讓它翻譯成js并讓瀏覽器執(zhí)行。

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，與其他大型框架相比，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。其他大型框架往往一開(kāi)始就對(duì)項(xiàng)目的技術(shù)方案進(jìn)行強(qiáng)制性的要求，而Vue更加靈活，開(kāi)發(fā)者既可以選擇使用Vue來(lái)開(kāi)發(fā)一個(gè)全新項(xiàng)目，將Vue引入到一個(gè)現(xiàn)有的項(xiàng)目中。

當(dāng)Vue與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。工具鏈?zhǔn)侵冈谇岸碎_(kāi)發(fā)過(guò)程中用到的一系列工具，例如，使用腳手架工具創(chuàng)建應(yīng)用，使用依賴管理工具安裝依賴包，以及使用構(gòu)建工具進(jìn)行代碼編譯等。

Vue的數(shù)據(jù)驅(qū)動(dòng)是通過(guò)MVVM(Model-View-ViewModel)模式來(lái)實(shí)現(xiàn)，VUE的工作原理：

MVVM包含3個(gè)部分分別是Model、View和ViewModel。Model指的是數(shù)據(jù)部分，主要負(fù)責(zé)業(yè)務(wù)數(shù)據(jù);View指的是視圖部分，即DOM元素，負(fù)責(zé)視圖的處理。ViewModel是連接視圖與數(shù)據(jù)的數(shù)據(jù)模型，負(fù)責(zé)監(jiān)聽(tīng)Model或者View的修改。

在MVVM中，數(shù)據(jù)和視圖是不能直接通信的，視圖模型(ViewModel)就相當(dāng)于一個(gè)觀察者，監(jiān)控著雙方的動(dòng)作，并及時(shí)通知進(jìn)行相應(yīng)操作。當(dāng)Model發(fā)生變化的時(shí)候，ViewModel能夠監(jiān)聽(tīng)到這種變化，并及時(shí)通知View做出相應(yīng)的修改。反之，當(dāng)View發(fā)生變化時(shí)，ViewModel監(jiān)聽(tīng)到變化后，通知Model進(jìn)行修改，實(shí)現(xiàn)了視圖與模型的互相解耦。

目前市場(chǎng)三大前端主流框架分別是Angular、React和Vue。Vue之所以被開(kāi)發(fā)者青睞，主要是Vue有Angular和React框架兩者的優(yōu)勢(shì)，并且Vue的代碼簡(jiǎn)潔、上手容易，在市場(chǎng)上也得到大量應(yīng)用。

Vue特性：

1、輕量級(jí)

Angular的學(xué)習(xí)成本高，使用起來(lái)比較復(fù)雜，而Vue相對(duì)簡(jiǎn)單、直接，所以Vue使用起來(lái)更加友好。

2、數(shù)據(jù)綁定

Vue是一個(gè)MVVM框架，數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化，這也算是Vue的精髓之處。尤其是在進(jìn)行表單處理時(shí)，Vue的雙向數(shù)據(jù)綁定非常方便。

3、指令

指令主要包括內(nèi)置指令和自定義指令，以“v-”開(kāi)頭，作用于HTML元素。指令提供了一些特殊的特性，將指令綁定在元素上時(shí)，指令會(huì)給綁定的元素添加一些特殊的行為。例如，v-bind動(dòng)態(tài)綁定指令、v-if條件渲染指令、v-for列表渲染指令等。

4、插件

插件用于對(duì)Vue框架功能進(jìn)行擴(kuò)展，通過(guò)MyPlugin.install完成插件的編寫(xiě)，簡(jiǎn)單配置后就可以全局使用。常用的擴(kuò)展插件有vue-router、Vuex等。

Vue很多特性與Angular和React有著相同的地方，但是也有著性能方面的差別。Vue使用基于依賴追蹤的觀察系統(tǒng)并且使用異步隊(duì)列更新，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的，提高了數(shù)據(jù)處理能力。

React和Vue的中心思想是一切都是組件，組件之間可以實(shí)現(xiàn)嵌套。React采用了特殊的JSX語(yǔ)法，Vue中也推崇編寫(xiě)以*.vue后綴命名的文件格式，對(duì)文件內(nèi)容都有一些規(guī)定，兩者需要編譯后使用。

React依賴虛擬DOM，而Vue使用的是DOM模板。Vue在模板中提供了指令、過(guò)濾器等，可以非常方便和快捷地操作DOM。推薦將Vue使用到具有復(fù)雜交互邏輯的前端應(yīng)用中，以確保用戶的體驗(yàn)效果。

985大學(xué) 211大學(xué) 全國(guó)院校對(duì)比 專(zhuān)升本