vue 雙向綁定的基本原理

首先了解一下Object.defineProperty

• object.defineProperty(obj, prop, descriptor)有三個參數

  -- obj
      要定義屬性的對象。
  -- prop
      要定義或修改的屬性的名稱或 symbol。
  --descriptor
      要定義或修改的屬性描述符。
  --這裡主要用到兩個屬性描述符
      get： 當通路該屬性時，會調用此函數。但是會傳入 this 對象（由于繼承關系，這裡的this并不一定是定義該屬性的對象）。該函數的傳回值會被用作屬性的值。
      set:   當屬性值被修改時，會調用此函數。該方法接受一個參數（也就是被賦予的新值），會傳入指派時的 this 對象。
             

// html
<input type="text" id="txt" />
// js
let obj = {}
let temp = ''
let message = document.querySelector('input')
message.oninput = function(){
    obj.name = this.value
    console.log(obj.name)
}
// m => v
Object.defineProperty(obj, 'name', {
    set(value){
        temp = value
        message.value = value
    },
    get(){
        return temp
    }
})