vuejs資料驅動怎麼理解

在vuejs中，資料驅動是指當資料發生變化的時候，使用者介面發生相應的變化，開發者不需要手動的去修改dom；簡單來說就是通過控制資料的變化來改變DOM，讓檢視（DOM）的內容隨著資料的改變而改變。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

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

Vue是一個基於MVVM模式資料驅動頁面的框架，它將資料繫結在檢視上。屬於實現單頁面應用的技術。

總結起來的幾大特點：

簡潔
輕量
快速
資料驅動
模組友好
元件化

vue靠資料驅動雙向繫結使我們開發頁面更簡單，開發者不需要手動的去修改dom。Vue通過資料雙向繫結是一切變得更簡單。它的資料驅動雙向繫結，底層是通過Object.defineProperty() 定義的資料 set、get 函數原理實現。

2、元件化開發，讓專案的可拓展性、移植性更好，程式碼重用性更高。

3、單頁應用的體驗，區域性元件更新介面，讓使用者體驗更快速省時。

單頁應用也稱為SPA是將所有的活動侷限於一個Web頁面中，僅在該Web頁面初始化時載入相應的HTML、JavaScript 和 CSS。載入完成，頁面不在重新載入或跳轉，僅僅是裡面的元件或模組通過hash,或者history api來進行互動和跳轉，並通過ajax拉取資料來實現響應功能，整個應用就一個html，所以叫單頁面！

4、js的程式碼無形的規範，團隊合作開發程式碼可閱讀性更高。

二： Vue資料驅動（雙向資料繫結）的原理？

什麼是資料驅動

資料驅動是vue.js最大的特點。在vue.js中，所謂的資料驅動就是當資料發生變化的時候，使用者介面發生相應的變化，開發者不需要手動的去修改dom。

比如說我們點選一個button，需要元素的文字進行是和否的切換。在jquery中，對於頁面的修改我們一般是這樣的一個流程，我們對button繫結事件，然後獲取文案對應的元素dom物件，然後根據切換修改該dom物件的文案值。

那麼vuejs是如何實現這種資料驅動的呢？

vue實現資料雙向繫結主要是：採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應監聽回撥。當把一個普通 Javascript 物件傳給 Vue 範例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被存取和修改時通知變化。

vue的資料雙向繫結將MVVM作為資料繫結的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的資料變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到資料變化 —>檢視更新；檢視互動變化（input）—>資料model變更雙向繫結效果。

對getter/setter的理解？

當列印出Vue範例下的data物件裡的屬性，它的每個屬性都有兩個相對應的get和set方法，顧名思義，get為取值，set為賦值，正常情況下，我們取值和賦值是用obj.prop的方式，但是這樣做有一個問題，我如何知道物件的值改變了？所以就輪到set登場了。你可以把get和set理解為function，當我們呼叫物件的屬性時，我們會進入到get.屬性(){...}中，先判斷物件是否有這個屬性，如果沒有，那麼就新增一個name屬性，並給它賦值；如果有name屬性，那就返回name屬性。你可以把get看成一個取值的函數，函數的返回值就是它拿到的值。感覺比較重要的是set屬性，當給範例賦值：此時，會進入set name(val){...}；形參val就是我賦給name屬性的值，在這個函數裡，就可以做很多事了，比如雙向繫結！因為這個值的每次改變都必須經過set，其他方式是改變不了它的，相當於一個萬能的監聽器。ES5的物件原型有兩個新的屬性__defineGetter__和__defineSetter__，專門用來給物件繫結get和set。建議使用下面這種方式，因為是在原型上書寫，所以可以繼承和重用。

三：MVVM框架

Vue.js的資料驅動就是通過MVVM這種框架來實現的。MVVM框架主要包含3個部分:model、view和 viewmodel。

Model:指的是資料部分，對應到前端相當於javascript物件
View:指的是檢視部分，對應前端相當於dom
Viewmodel:就是連線檢視與資料的中介軟體通訊

資料(Model)和檢視(View)是不能直接通訊的，而是需要通過ViewModel來實現雙方的通訊。當資料變化的時候，viewModel能夠監聽到這種變化，並及時的通知view做出修改。同樣的，當頁面有事件觸發時，viewMOdel也能夠監聽到事件，並通知model進行響應。Viewmodel就相當於一個觀察者，監控著雙方的動作，並及時通知對方進行相應的操作。