Vue 框架怎么實現對象和數組的監聽？

如果被問到 Vue 怎么實現數據雙向綁定，大家肯定都會回答 通過 Object.defineProperty() 對數據進行劫持，但是 Object.defineProperty() 只能對屬性進行數據劫持，不能對整個對象進行劫持。
同理無法對數組進行劫持，但是我們在使用 Vue 框架中都知道，Vue 能檢測到對象和數組（部分方法的操作）的變化，那它是怎么實現的呢？我們查看相關代碼如下：

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])  // observe 功能為監測數據的變化
    }
  }

  /**
   * 對屬性進行遞歸遍歷
   */
  let childOb = !shallow && observe(val) // observe 功能為監測數據的變化

 

通過以上 Vue 源碼部分查看，我們就能知道 Vue 框架是通過遍歷數組 和遞歸遍歷對象，從而達到利用 Object.defineProperty() 也能對對象和數組（部分方法的操作）進行監聽。