vuejs對開發(fā)有啥作用

本篇文章給大家分享的是有關(guān)vuejs對開發(fā)有啥作用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

昭化網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

vuejs對開發(fā)有啥好處？

vue框架（為什么要是用Vue，好處是什么）

1、什么是Vue.js

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式的JavaScript框架。

2、Vue.js的優(yōu)點(diǎn)

• 體積?。簤嚎s后只有33k；

• 更高的運(yùn)行效率：基于虛擬DOM，一種可以預(yù)先通過JavaScript進(jìn)行各種計(jì)算，把最終的DOM操作計(jì)算出來并優(yōu)化的技術(shù)，由于這種DOM操作屬于預(yù)處理操作，并沒有真實(shí)的操作DOM，所以叫做虛擬DOM；

• 雙向數(shù)據(jù)綁定：讓開發(fā)者不用再去操作DOM對象，把更多的精力投入到業(yè)務(wù)邏輯上；

• 生態(tài)豐富、學(xué)習(xí)成本低：市場上擁有大量成熟、穩(wěn)定的基于vue.js的ui框架及組件，拿來即用實(shí)現(xiàn)快速開發(fā)；對初學(xué)者友好、入門容易、學(xué)習(xí)資料多；

3、為什么要使用Vue.js

隨著前端技術(shù)的不斷發(fā)展，前端開發(fā)能夠處理的業(yè)務(wù)越來越多，網(wǎng)頁也變得越來越強(qiáng)大和動(dòng)態(tài)化，這些進(jìn)步都離不開JavaScript。在目前的開發(fā)中，已經(jīng)把很多服務(wù)端的代碼放到了瀏覽器中來執(zhí)行，這就產(chǎn)生了成千上萬行的JavaScript代碼，他們連接著各式各樣的HTML和CSS文件，但是缺乏正規(guī)的組織形式。這也是為什么越來越多的前端開發(fā)者使用JavaScript框架的原因，目前比較流行的前端框架有Angular、Reac、Vue等。

Vue是一款友好的、多用途且高性能的JavaScript框架，它能夠幫助你創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫。Vue是漸進(jìn)式的JavaScript框架，也就是說，如果你已經(jīng)有了現(xiàn)成的服務(wù)端應(yīng)用，你可以將Vue作為該應(yīng)用的一部分嵌入其中，帶來更加豐富的交互體驗(yàn)?；蛘呷绻阆Ｍ麑⒏鄻I(yè)務(wù)邏輯放到前端來實(shí)現(xiàn)，那么Vue的核心庫及其生態(tài)系統(tǒng)也可以滿足你的各式需求。

和其他框架一樣，Vue允許你將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方。如果我們構(gòu)建了一個(gè)大型的應(yīng)用，可能需要將東西分割成為各自的組件和文件，使用Vue的命令行工具，使快速初始化一個(gè)真實(shí)的工程變得非常簡單。

vue init webpack my-project

我們甚至可以使用Vue的單文件組件，它包含了各自的HTML、JavaScript以及帶作用域的CSS或SCSS。

4、MVC、MVP、MVVM 設(shè)計(jì)模式

MVC（Model-View-Controller）是最常見的軟件架構(gòu)之一，在軟件開發(fā)領(lǐng)域有著廣泛的應(yīng)用，MVC本身是比較好理解的，但是要講清楚由它衍生出來的MVP和MVVM就不太容易了。

4.1、MVC

MVC的意思是，可以將軟件分為三個(gè)部分：

• 視圖（View）：用戶界面

• 控制器（Controller）：業(yè)務(wù)邏輯

• 模型（Model）：數(shù)據(jù)保存

各部分之間的通信方式為：

• View傳送指令到Controller

• Controller完成業(yè)務(wù)邏輯后，要求Model改變狀態(tài)

• Model將新的數(shù)據(jù)發(fā)送到View，用戶得到反饋

并且所有的通信都是單向的，如下圖所示：

MVC 模式的執(zhí)行流程是有兩種方式：

（1）通過View接受指令，傳遞給Controller

（2）直接通過Controller接受指令

實(shí)際項(xiàng)目中往往采用更加靈活的方式：

（1）用戶可以向View發(fā)送指令（DOM事件），再由View直接要求Model改變狀態(tài)；

（2）用戶也可以直接向Controller發(fā)送指令（改變URL觸發(fā)hashChange事件），再由Controller發(fā)送給view ;

（3）Controller非常薄，只起到路由的作用，而View非常厚，業(yè)務(wù)邏輯都部署在View，所以有些框架里就直接取消了Controller，只保留一個(gè)Router（路由器）。

如圖所示：

4.2、MVP

MVP（Model-View-Presenter），是從經(jīng)典的MVC演變而來的。Mode提供數(shù)據(jù)，View負(fù)責(zé)顯示，Presenter負(fù)責(zé)邏輯的處理。

MVP和MVC有著一個(gè)重大的區(qū)別：

• 在MVP中View與Model不發(fā)生聯(lián)系，它們之間的通信是通過Presenter來進(jìn)行的，所有的交互都發(fā)生在Presenter（即MVC中的Controller）內(nèi)部；而在MVC中View會(huì)直接從Model中讀取數(shù)據(jù)而不是通過Controller。

• MVP中各部分之間的通信是雙向的，而在MVC中各部分之間的通信是單向的。

• 在MVP中，View非常薄，不部署任何業(yè)務(wù)邏輯，稱為“被動(dòng)視圖”（Passive View），即沒有任何主動(dòng)性，而Presenter非常厚，所有邏輯都部署在那里。

如圖所示：

4.3、MVVM

MVVM（Model-View-ViewModel），它本質(zhì)上是MVC的改進(jìn)版，是針對MVC中的View進(jìn)行了更細(xì)致的分工。ViewModel將視圖UI和業(yè)務(wù)邏輯分開，它可以取出Model的數(shù)據(jù)，同時(shí)幫助處理View中由于需要展示內(nèi)容而設(shè)計(jì)到的業(yè)務(wù)邏輯。

MVVM模式與MVP模式類似，唯一的區(qū)別是，它采用了數(shù)據(jù)雙向綁定（data-binding），即View的變動(dòng)自動(dòng)反應(yīng)在ViewModel，反之亦然。

5、數(shù)據(jù)驅(qū)動(dòng)（雙向數(shù)據(jù)綁定）的原理

什么是數(shù)據(jù)驅(qū)動(dòng)

數(shù)據(jù)驅(qū)動(dòng)是Vue.js最大的特點(diǎn)。在vue中，所謂的數(shù)據(jù)驅(qū)動(dòng)就是當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，用戶界面發(fā)生相應(yīng)的變化，開發(fā)者不需要手動(dòng)的去修改DOM。

比如，我們點(diǎn)擊一個(gè)button，需要元素的文本做一個(gè) “是/否” 的切換操作，在傳統(tǒng)的jQuery中，對于頁面修改的流程通常是：對button綁定事件，然后獲取文案對應(yīng)元素的dom對象，最后根據(jù)切換來修改dom對象的文本值。

Vue實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要采用數(shù)據(jù)劫持，配合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個(gè)屬性的 setter 和 getter ，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。

當(dāng)一個(gè)普通 JavaScript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時(shí)，vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter 。用戶看不到 getter/setter ，但是在內(nèi)部它們讓vue追蹤依賴，在屬性被訪問和修改時(shí)通知變化。

vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的Model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中用來解析{{}}模板語法），最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到 數(shù)據(jù)變化 —> 視圖更新；視圖交互變化（input）—> 數(shù)據(jù)model變更 雙向綁定效果。

getter和setter的理解

當(dāng)打印出vue實(shí)例下的data對象里的屬性，它的每個(gè)屬性都有兩個(gè)對應(yīng)的get和set方法。顧名思義，get為取值方法，set為賦值方法。正常情況下，取值和賦值是用 obj.prop 的方式，但是這樣做有一個(gè)問題，我們?nèi)绾沃缹ο蟮闹蹈淖兞耍?/p>

我們可以把get和set理解為function，當(dāng)我們調(diào)用對象的屬性時(shí)，會(huì)進(jìn)入到 get.屬性(){...} 中，先判斷對象是否有這個(gè)屬性，如果沒有，那么就添加一個(gè)name屬性，并給它賦值；如果有name屬性，那么就返回name屬性?？梢园裧et看成一個(gè)取值的函數(shù)，函數(shù)的返回值就是它拿到的值。

當(dāng)給實(shí)例賦值時(shí)，會(huì)進(jìn)入 set.屬性(val){...} 中，形參val就是賦給屬性的值，在這個(gè)函數(shù)里做了很多事情，比如雙向綁定等等。因?yàn)檫@個(gè)值每次都要經(jīng)過set，其他方式無法對該值做修改。在ES5中，對象原型有兩個(gè)屬性，_defineGetter_ 和 _defineSetter_ ，專門用來給對象綁定get和set。

6、虛擬DOM

6.1 什么是虛擬DOM

在Vue.js 2.0版本中引入了 Virtual DOM 的概念，Virtual DOM 其實(shí)就是一個(gè)以JavaScript對象（VNode節(jié)點(diǎn)）作為基礎(chǔ)來模擬DOM結(jié)構(gòu)的樹形結(jié)構(gòu)，這個(gè)樹形結(jié)構(gòu)包含了整個(gè)DOM結(jié)構(gòu)的信息。簡單來說，可以把Virtual DOM理解為一個(gè)簡單的JS對象，并且最少包含標(biāo)簽名（tag）、屬性（attrs）和子元素對象（children）三個(gè)屬性。不同的框架對這三個(gè)屬性的命名會(huì)有所差別。

6.2 虛擬DOM的作用

虛擬DOM的最終目標(biāo)是將虛擬節(jié)點(diǎn)渲染到視圖上。但是如果直接使用虛擬節(jié)點(diǎn)覆蓋舊節(jié)點(diǎn)的話，會(huì)有很多不必要的DOM操作。例如，一個(gè)ul標(biāo)簽下有很多個(gè)li標(biāo)簽，其中只有一個(gè)li標(biāo)簽有變化，這種情況下如果使用新的ul去替代舊的ul，會(huì)因?yàn)檫@些不必要的DOM操作而造成性能上的浪費(fèi)。

為了避免不必要的DOM操作，虛擬DOM在虛擬節(jié)點(diǎn)映射到視圖的過程中，將虛擬節(jié)點(diǎn)與上一次渲染視圖所使用的舊虛擬節(jié)點(diǎn)做對比，找出真正需要更新的節(jié)點(diǎn)來進(jìn)行DOM操作，從而避免操作其他不需要改動(dòng)的DOM元素。

其實(shí)，虛擬DOM在Vue.js中主要做了兩件事情：

• 提供與真實(shí)DOM節(jié)點(diǎn)所對應(yīng)的虛擬節(jié)點(diǎn)VNode

• 將虛擬節(jié)點(diǎn)VNode和舊虛擬節(jié)點(diǎn)oldVNode進(jìn)行對比，然后更新視圖

6.3 為什么要使用虛擬DOM

• 具備跨平臺優(yōu)勢，由于Virtual DOM 是以JavaScript對象為基礎(chǔ)而不依賴真實(shí)平臺環(huán)境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node等。

• 操作DOM慢，JS運(yùn)行效率高，可以將DOM對比操作放在JS層，提高效率。因?yàn)镈OM操作的執(zhí)行速度遠(yuǎn)不如JavaScript運(yùn)算速度快，因此，把大量的DOM操作搬運(yùn)到JavaScript中，運(yùn)用patching算法來計(jì)算出真正需要更新的節(jié)點(diǎn)，最大限度地減少DOM操作，從而顯著提高性能。Vritual DOM本質(zhì)上就是在JS和DOM之間做了一個(gè)緩存，JS只操作Virtual DOM，最后把變更寫入到真實(shí)DOM。

• 提高渲染性能，Virtual DOM的優(yōu)勢不在于單次的操作，而是在大量、頻繁的數(shù)據(jù)更新下，能夠?qū)σ晥D進(jìn)行合理、高效的更新。

以上就是vuejs對開發(fā)有啥作用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：vuejs對開發(fā)有啥作用
網(wǎng)站網(wǎng)址：http://muchs.cn/article28/jpcecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、做網(wǎng)站、商城網(wǎng)站、網(wǎng)站策劃、虛擬主機(jī)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)