在vuejs中，數(shù)據(jù)驅(qū)動是指當數(shù)據(jù)發(fā)生變化的時候，用戶界面發(fā)生相應的變化，開發(fā)者不需要手動的去修改dom；簡單來說就是通過控制數(shù)據(jù)的變化來改變DOM，讓視圖（DOM）的內(nèi)容隨著數(shù)據(jù)的改變而改變。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一：Vue是什么，怎么理解Vue

Vue是一個基于MVVM模式數(shù)據(jù)驅(qū)動頁面的框架，它將數(shù)據(jù)綁定在視圖上。屬于實現(xiàn)單頁面應用的技術。

總結起來的幾大特點：

• 簡潔

• 輕量

• 快速

• 數(shù)據(jù)驅(qū)動

• 模塊友好

• 組件化

vue靠數(shù)據(jù)驅(qū)動雙向綁定使我們開發(fā)頁面更簡單，開發(fā)者不需要手動的去修改dom。Vue通過數(shù)據(jù)雙向綁定是一切變得更簡單。它的數(shù)據(jù)驅(qū)動雙向綁定，底層是通過Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)原理實現(xiàn)。

2、組件化開發(fā)，讓項目的可拓展性、移植性更好，代碼重用性更高。

3、單頁應用的體驗，局部組件更新界面，讓用戶體驗更快速省時。

單頁應用也稱為SPA是將所有的活動局限于一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。加載完成，頁面不在重新加載或跳轉(zhuǎn)，僅僅是里面的組件或模塊通過hash,或者history api來進行交互和跳轉(zhuǎn)，并通過ajax拉取數(shù)據(jù)來實現(xiàn)響應功能，整個應用就一個html，所以叫單頁面！

4、js的代碼無形的規(guī)范，團隊合作開發(fā)代碼可閱讀性更高。

二： Vue數(shù)據(jù)驅(qū)動（雙向數(shù)據(jù)綁定）的原理？

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

數(shù)據(jù)驅(qū)動是vue.js最大的特點。在vue.js中，所謂的數(shù)據(jù)驅(qū)動就是當數(shù)據(jù)發(fā)生變化的時候，用戶界面發(fā)生相應的變化，開發(fā)者不需要手動的去修改dom。

比如說我們點擊一個button，需要元素的文本進行是和否的切換。在jquery中，對于頁面的修改我們一般是這樣的一個流程，我們對button綁定事件，然后獲取文案對應的元素dom對象，然后根據(jù)切換修改該dom對象的文案值。

那么vuejs是如何實現(xiàn)這種數(shù)據(jù)驅(qū)動的呢？

vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應監(jiān)聽回調(diào)。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

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

對getter/setter的理解？

當打印出Vue實例下的data對象里的屬性，它的每個屬性都有兩個相對應的get和set方法，顧名思義，get為取值，set為賦值，正常情況下，我們?nèi)≈岛唾x值是用obj.prop的方式，但是這樣做有一個問題，我如何知道對象的值改變了？所以就輪到set登場了。你可以把get和set理解為function，當我們調(diào)用對象的屬性時，我們會進入到get.屬性(){…}中，先判斷對象是否有這個屬性，如果沒有，那麼就添加一個name屬性，并給它賦值；如果有name屬性，那就返回name屬性。你可以把get看成一個取值的函數(shù)，函數(shù)的返回值就是它拿到的值。感覺比較重要的是set屬性，當給實例賦值：此時，會進入set name(val){…}；形參val就是我賦給name屬性的值，在這個函數(shù)里，就可以做很多事了，比如雙向綁定！因為這個值的每次改變都必須經(jīng)過set，其他方式是改變不了它的，相當于一個萬能的監(jiān)聽器。ES5的對象原型有兩個新的屬性__defineGetter__和__defineSetter__，專門用來給對象綁定get和set。建議使用下面這種方式，因為是在原型上書寫，所以可以繼承和重用。

三：MVVM框架

Vue.js的數(shù)據(jù)驅(qū)動就是通過MVVM這種框架來實現(xiàn)的。MVVM框架主要包含3個部分:model、view和 viewmodel。

• Model:指的是數(shù)據(jù)部分，對應到前端相當于javascript對象

• View:指的是視圖部分，對應前端相當于dom

• Viewmodel:就是連接視圖與數(shù)據(jù)的中間件通訊

數(shù)據(jù)(Model)和視圖(View)是不能直接通訊的，而是需要通過ViewModel來實現(xiàn)雙方的通訊。當數(shù)據(jù)變化的時候，viewModel能夠監(jiān)聽到這種變化，并及時的通知view做出修改。同樣的，當頁面有事件觸發(fā)時，viewMOdel也能夠監(jiān)聽到事件，并通知model進行響應。Viewmodel就相當于一個觀察者，監(jiān)控著雙方的動作，并及時通知對方進行相應的操作。