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)

使用過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)的變化，開發(fā)者不需要手動(dòng)的去修改dom。

再通俗一點(diǎn)就是，你在這里改變了一下數(shù)據(jù)，在頁面其他使用該數(shù)據(jù)的地方也會(huì)隨之發(fā)生改變，而我們開發(fā)者只是在這里改變了一下數(shù)據(jù)，并沒有直接操作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è)人聽見了（監(jiān)聽），這個(gè)人就把領(lǐng)導(dǎo)的消息傳遞給下面的程序員，下面的程序員一聽到這個(gè)消息，馬上就準(zhǔn)備收拾東西回家休息了（頁面的元素隨之改變）。

大概就是下面這張圖：

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

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

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

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

簡單說說defineProperty

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

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

下面我列出一些常見的屬性配置項(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);
     }
 })

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

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

您可能感興趣的文章: