如何理解vuejs數(shù)據(jù)驅(qū)動

本篇文章為大家展示了如何理解vuejs數(shù)據(jù)驅(qū)動，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

在vuejs中，數(shù)據(jù)驅(qū)動是指當(dāng)數(shù)據(jù)發(fā)生變化的時候，用戶界面發(fā)生相應(yīng)的變化，開發(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ù)綁定在視圖上。屬于實(shí)現(xiàn)單頁面應(yīng)用的技術(shù)。

總結(jié)起來的幾大特點(diǎn)：

• 簡潔

• 輕量

• 快速

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

• 模塊友好

• 組件化

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

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

3、單頁應(yīng)用的體驗(yàn)，局部組件更新界面，讓用戶體驗(yàn)更快速省時。

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

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

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

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

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

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

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

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個普通 Javascript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時，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之間的通信橋梁，達(dá)到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。

對getter/setter的理解？

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

三：MVVM框架

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

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

• View:指的是視圖部分，對應(yīng)前端相當(dāng)于dom

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

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

上述內(nèi)容就是如何理解vuejs數(shù)據(jù)驅(qū)動，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。