Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋

更新時(shí)間：2022年12月12日 09:18:31 作者：海綿寶寶_0113

這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

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

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

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

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

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

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

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

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

大概就是下面這張圖：

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

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

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

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

簡(jiǎn)單說(shuō)說(shuō)defineProperty

可能有小伙伴不太熟悉這個(gè)方法，我在這簡(jiǎn)單的提一下：

語(yǔ)法：Object.defineProperty(obj,property,descriptor)
參數(shù)：obj 綁定屬性的目標(biāo)對(duì)象 property 綁定的屬性名 descriptor 屬性描述（配置項(xiàng)）

下面我列出一些常見(jiàn)的屬性配置項(xiàng)：

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

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

舉個(gè)例子：

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

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

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

您可能感興趣的文章: