Vue中的數據驅動解釋

Posted on by

Vue中數據驅動

使用過Vue框架的小夥伴知道在Vue中有這麼一個玩意：v-model。 這個玩意就用到瞭Vue中的數據驅動（數據雙向綁定）。

那麼，什麼是數據驅動呢？

數據驅動解釋

數據驅動是vue.js最大的特點。在vue.js中，所謂的數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不需要手動的去修改dom。

再通俗一點就是，你在這裡改變瞭一下數據，在頁面其他使用該數據的地方也會隨之發生改變，而我們開發者隻是在這裡改變瞭一下數據，並沒有直接操作DOM去改變其他地方的數據。

那Vue是怎麼實現的這一效果呢？

Vue數據驅動

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

大概就是下面這張圖：

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

首先我們看看數據驅動是如何監聽數據發生變化的？

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

這是vue文檔裡面的話，意思就是vue為data裡面的屬性（也就是我們的數據），都添加瞭getter/setter。這樣就可以監聽到數據的變化瞭。是不是還有有點蒙？沒關系，其實就是利用defineProperty方法來實現監聽的。

簡單說說defineProperty

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

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

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

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

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

舉個例子：

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

通過這個方法就可以實現vue中數據驅動對數據的監聽，vue如何對視圖進行更新呢？這就用到瞭vue中的虛擬DOM。我們下集聊聊這個Vue中的虛擬DOM。

以上就是Vue中的數據驅動解釋的詳細內容，更多關於Vue 數據驅動的資料請關註WalkonNet其它相關文章！

推薦閱讀：