mvvm數據雙向綁定實現的原理

leoperfect 發布于2019-08-23 12:12 / 469人閱讀

摘要：當處理好后則會將對應的數據展現到層。雙向綁定例如有一個變量通過輸入框的值來給它賦值，使用原生的方式是給框綁定事件每次觸發該事件的時候再把值賦給。如果實現了數據的雙向綁定則當的發生改變時，的值也會自動更新。

以Vue.js框架為例子，使用的mvvm模式

view指的是頁面的html和css構成的視圖。
model指的是從后端取到的數據模型
viewmodel 指的是前端開發人員組織生成和維護的視圖數據層。這一層包含的是視圖行為和數據。
視圖行為指的是如頁面加載進來時請求什么，將指定的數據放到指定的元素上，點擊某個元素觸發某事件。當viewmodel處理好后則會將對應的數據展現到view層。

雙向綁定
例如有一個變量name,通過輸入input框的值來給它賦值，使用原生js的方式是給input框綁定input事件,每次觸發該事件的時候再把值賦給name。
如果實現了數據的雙向綁定,則當input的value發生改變時，name的值也會自動更新。通過請求數據獲取別的js操作改變name的值時，在view中的input也會自動更新，這就是所謂的數據雙向綁定。

雙向綁定的好處在于不管是data(也就是name)或者視圖（input）發生了改動另外一個都可以跟著變化,不需要再手動給它們賦值。

實現代碼

//定義一個對象
let obj = {},txt = "";
  Object.defineProperty(obj,"txt",{
    set(val){
      txt = val || "";
      document.getElementsByTagName("input")[0].value = txt;
      document.getElementsByTagName("p")[0].innerHTML = txt;
    },
    get(){
      
      return txt;
    }
  })
  // keyup會觸發 obj的set方法
  document.addEventListener("keyup",(e)=>{
    obj.txt = e.target.value;
  })

GPU云服務器云服務器雙向數據綁定 js雙向數據綁定 js雙向綁定數據 asp雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98095.html

剖析Vue實現原理 - 如何實現雙向綁定mvvm（轉載）

摘要：接下來要看看這個訂閱者的具體實現了實現訂閱者作為和之間通信的橋梁，主要做的事情是在自身實例化時往屬性訂閱器里面添加自己自身必須有一個方法待屬性變動通知時，能調用自身的方法，并觸發中綁定的回調，則功成身退。本文能幫你做什么？1、了解vue的雙向數據綁定原理以及核心代碼模塊2、緩解好奇心的同時了解如何實現雙向綁定為了便于說明原理與實現，本文相關代碼主要摘自vue源碼, 并進行了簡化改造，...

nemo 2019-08-21 11:38 評論0 收藏0
剖析Vue原理&實現雙向綁定MVVM

摘要：所以無需太過介懷是實現的單向或雙向綁定。監聽數據綁定更新函數的處理是在這個方法中，通過添加回調來接收數據變化的通知至此，一個簡單的就完成了，完整代碼。本文能幫你做什么？1、了解vue的雙向數據綁定原理以及核心代碼模塊2、緩解好奇心的同時了解如何實現雙向綁定為了便于說明原理與實現，本文相關代碼主要摘自vue源碼, 并進行了簡化改造，相對較簡陋，并未考慮到數組的處理、數據的循環依賴等，也...

melody_lql 2019-08-21 14:17 評論0 收藏0
【教學向】150行代碼教你實現一個低配版的MVVM庫（1）- 原理篇

摘要：模塊則負責維護，以及各個模塊間的調度思考題了解了的實現機制，你能否自己動手也試著用百來行代碼實現一個庫呢好了本教程第一部分設計篇就寫到這里，具體請移步下一篇教學向行代碼教你實現一個低配版的庫代碼篇我會用給出一版實現。適讀人群本文適合對MVVM有一定了解（如有主流框架ng，vue等使用經驗配合本文服用則效果更佳），雖然會用這類框架，但是對框架底層核心實現又不太清楚，或者能說出個所以然...

selfimpr 2019-08-21 12:01 評論0 收藏0
Vue雙向綁定原理，教你一步一步實現雙向綁定

摘要：儲存訂閱器因為屬性被監聽，這一步會執行監聽器里的方法這一步我們把也給弄了出來，到這一步我們已經實現了一個簡單的雙向綁定了，我們可以嘗試把兩者結合起來看下效果。總結本文主要是對雙向綁定原理的學習與實現。當今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足于前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。所以我們要時刻保持好奇心，擁抱變化，...

Labradors 2019-08-23 12:31 評論0 收藏0