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