Vue中數(shù)據(jù)驅(qū)動

使用過Vue框架的小伙伴知道在Vue中有這么一個玩意：v-model。 這個玩意就用到了Vue中的數(shù)據(jù)驅(qū)動（數(shù)據(jù)雙向綁定）。

那么，什么是數(shù)據(jù)驅(qū)動呢？

數(shù)據(jù)驅(qū)動解釋

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

再通俗一點就是，你在這里改變了一下數(shù)據(jù)，在頁面其他使用該數(shù)據(jù)的地方也會隨之發(fā)生改變，而我們開發(fā)者只是在這里改變了一下數(shù)據(jù)，并沒有直接操作DOM去改變其他地方的數(shù)據(jù)。

那Vue是怎么實現(xiàn)的這一效果呢？

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

其實這個原理有點像那個中間人，舉個例子吧，你的領(lǐng)導有一天改動一條通知（數(shù)據(jù)發(fā)生了改變）：今天不上班，然后被某個人聽見了（監(jiān)聽），這個人就把領(lǐng)導的消息傳遞給下面的程序員，下面的程序員一聽到這個消息，馬上就準備收拾東西回家休息了（頁面的元素隨之改變）。

大概就是下面這張圖：

那現(xiàn)在擺在我們面前的就有兩個問題，這兩個箭頭是如何實現(xiàn)的呢？

首先我們看看數(shù)據(jù)驅(qū)動是如何監(jiān)聽數(shù)據(jù)發(fā)生變化的？

Vue 實例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創(chuàng)建的原生對象，原型上的屬性會被忽略。大概來說，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象。

這是vue文檔里面的話，意思就是vue為data里面的屬性（也就是我們的數(shù)據(jù)），都添加了getter/setter。這樣就可以監(jiān)聽到數(shù)據(jù)的變化了。是不是還有有點蒙？沒關(guān)系，其實就是利用defineProperty方法來實現(xiàn)監(jiān)聽的。

簡單說說defineProperty

可能有小伙伴不太熟悉這個方法，我在這簡單的提一下：

• 語法：Object.defineProperty(obj,property,descriptor)
• 參數(shù)：obj 綁定屬性的目標對象 property 綁定的屬性名 descriptor 屬性描述（配置項）

下面我列出一些常見的屬性配置項：

• value:設(shè)置屬性的默認值
• writable:設(shè)置屬性是否可以被修改
• enumerable：設(shè)置屬性是否可以被遍歷
• configurable：設(shè)置屬性是否可以被編輯（包括刪除等等）
• get：獲取屬性值
• set：設(shè)置屬性值

其中set與get就是我們要用到的屬性：

舉個例子：

 let data = {
     a:1;
 };
 Object.defineProperty(data,a,{
     get:()=>{
         console.log('獲取數(shù)據(jù)啦');
     },
     set:(value)=>{
         console.log('設(shè)置新數(shù)據(jù)啦',value);
     }
 })

通過這個方法就可以實現(xiàn)vue中數(shù)據(jù)驅(qū)動對數(shù)據(jù)的監(jiān)聽，vue如何對視圖進行更新呢？這就用到了vue中的虛擬DOM。我們下集聊聊這個Vue中的虛擬DOM。

以上就是Vue中的數(shù)據(jù)驅(qū)動解釋的詳細內(nèi)容，更多關(guān)于Vue 數(shù)據(jù)驅(qū)動的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論