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就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

相关推荐：《vue.js教程》

以上是vuejs資料驅動怎麼理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！