Object.defineProperty介紹

基本語法：Object.defineProperty(obj, prop, descriptor)

obj是須要在它上面定義參數prop的對象，prop是須要定義或修改的屬性，descriptor爲參數配置

在此，不過多瞭解它其餘的功能，須要瞭解請查看：MDN https://developer.mozilla.org...

Object.defineProperty是es5的新特性，他有一個特別實用的應用場景，就是它能夠實現數據和視圖的綁定，經過改變數據更新頁面

栗子

HTML：

<h2></h2>

JS：

var oH2 = document.querySelector('h2');
var obj = {};
var initvalue = 'hello'
// 經過Object.defineProperty方法爲該對象的屬性定義get與set方法。
Object.defineProperty(obj, 'title', {
  // 當屬性被獲取的時候，返回的值，
  get() {
    return initvalue;
  },
  // 當修改屬性時，會接收一個修改後的最新的值
  set(newValue) {
    initvalue = newValue;
    //將這個最新的值渲染到頁面上
    oH2.innerText = newValue;
  }
})
// 設置定時器改變數據
setInterval(() => {
  let time = new Date()
  obj.title = "hi " + time
})

這個栗子，實現了數據和視圖的動態綁定，讓你的關注點能夠集中在數據處理上

剖析Vue原理&實現雙向綁定MVVM：https://segmentfault.com/a/11...