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

以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;
  })