好程序員web前端分享MVVM框架Vue實(shí)現(xiàn)原理，Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js和react.js更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。

?

1.什么是MVVM呢？

MVVM的簡(jiǎn)寫是Model-View-ViewModel。

　　在過(guò)去的10年里面，我們已經(jīng)把很多傳統(tǒng)的服務(wù)端代碼放到了瀏覽器中，這樣就產(chǎn)生了成千上萬(wàn)行的javascript代碼，它們連接了HTML 和CSS文件，但缺乏正規(guī)的組織形式，這也就是為什么很多開發(fā)者使用框架。比如：angular.js、react.js、vue.js。有了這些框架之后，瀏覽器的兼容性問(wèn)題已經(jīng)不再是我們前端開發(fā)的阻礙。（這里應(yīng)該有歡呼聲，為什么要這么說(shuō)，下次寫瀏覽器兼容時(shí)再告訴你們）前端的項(xiàng)目體積不斷的在加大，從一個(gè)簡(jiǎn)陋的小小的頁(yè)面變成炫彩的頁(yè)面需要成千上萬(wàn)的代碼，這樣導(dǎo)致了項(xiàng)目的可維護(hù)性和擴(kuò)展性包括重要的安全性等成了最主要問(wèn)題。

　　這也是為什么有很多很多的開發(fā)人員使用框架，框架簡(jiǎn)潔，有API。在當(dāng)年那個(gè)時(shí)代為了解決瀏覽器兼容性問(wèn)題，出現(xiàn)了很多類庫(kù)，其中最典型的就是JQuery。但是這類庫(kù)沒有實(shí)現(xiàn)對(duì)業(yè)務(wù)邏輯的分成，所以維護(hù)性和擴(kuò)展性極差。綜上兩方面原因，才有了MVVM模式一類框架的出現(xiàn)。比如說(shuō)vue.js框架就是通過(guò)數(shù)據(jù)的雙向綁定，極大了提高了開發(fā)效率。

MVVM框架

Vue就是基于MVVM模式實(shí)現(xiàn)的一套框架，在vue框架中：

Model:指的是js中的數(shù)據(jù)，如對(duì)象，數(shù)組等等。

View:指的是頁(yè)面視圖

viewModel:指的是vue實(shí)例化對(duì)象，

　　都說(shuō)Vue.js是一個(gè)漸進(jìn)式的javascript框架, 漸進(jìn)式是什么意思？

　　假如你已經(jīng)有一個(gè)現(xiàn)成的服務(wù)端應(yīng)用，你可以將vue 作為該應(yīng)用的一部分加入其中，帶來(lái)更好的交互體驗(yàn);

　　假如你想將更多的業(yè)務(wù)邏輯放到界面來(lái)實(shí)現(xiàn)，那么Vue可以滿足你大部分的需求，（vue2.x+vue-router+axios+webpack）。和其它前端框架一樣，VUE的優(yōu)點(diǎn)在于可以很好的每一個(gè)功能、特效變成組件化，有更好的可維護(hù)性，也可以進(jìn)行復(fù)用，每個(gè)組件都包含屬于自己的HTML、CSS、JAVASCRIPT以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方

如果我們構(gòu)建一個(gè)大型的應(yīng)用，在這一點(diǎn)上，vue有一個(gè)命令行工具，使快速初始化一個(gè)真實(shí)的工程變得非常簡(jiǎn)單（vue init webpack my-project）。我們可以使用VUE的單文件組件，它包含了各自的html、JavaScript以及帶作用域的css或scss。

以上這三個(gè)例子，是一步步遞進(jìn)的，也就是說(shuō)對(duì)Vue.js的使用可大可小，它都會(huì)有相應(yīng)的方式來(lái)整合到你的項(xiàng)目中。所以說(shuō)它是一個(gè)漸進(jìn)式的框架。Vue.js最獨(dú)特的特性：當(dāng)我們的數(shù)據(jù)變更時(shí)，Vue.js會(huì)幫你更新所有網(wǎng)頁(yè)中用到它的地方。

總結(jié)

以上是生活随笔為你收集整理的好程序员web前端分享MVVM框架Vue实现原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。