這篇文章主要講解了Vue是如何實(shí)現(xiàn)的，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司是專業(yè)的大方網(wǎng)站建設(shè)公司，大方接單;提供做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行大方網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

用了Vue也有兩年時(shí)間了，一直以來都是只知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學(xué)習(xí)一下Vue底層的基本原理。

Vue官網(wǎng)有一段這樣的介紹：當(dāng)你把一個(gè)普通的JavaScript對象傳給Vue實(shí)例的data選項(xiàng)，Vue將遍歷此對象所有的屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為getter/setter。Object.defineProperty是ES5中一個(gè)無法shim的特性，這也就是為什么Vue不支持 IE8 以及更低版本瀏覽器。

通過這一段的介紹不難可以得出，Vue是通過Object.defineProperty對實(shí)例中的data數(shù)據(jù)做了挾持并且使用Object.defineProperty的getter/setter并對其進(jìn)行處理之后完成了數(shù)據(jù)的與視圖的同步。

這張圖應(yīng)該不會很陌生，熟悉Vue的同學(xué)如果仔細(xì)閱讀過Vue文檔的話應(yīng)該都看到過。猜想一下Vue使用Object.defineProperty做為ViewModel，對數(shù)據(jù)進(jìn)行挾持之后如果View和Model發(fā)生變化的話，就會通知其相對應(yīng)引用的地方進(jìn)行更新處理，完成視圖的與數(shù)據(jù)的雙向綁定。

下面舉個(gè)例子：

html:

文章標(biāo)題：Vue是如何實(shí)現(xiàn)的-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://weahome.cn/article/hpeeo.html