Vue.js 基本上遵循 MVVM（Model–View–ViewModel）架構模式，資料模型僅僅是普通的 JavaScript 物件，而當你修改它們時，視圖會進行更新， 本文講解一下 Vue 回應式系統的底層細節，

檢測變化注意事項

Vue 2.0中，是基于 Object.defineProperty 實作的回應式系統 （這個方法是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因）
vue3 中，是基于 Proxy/Reflect 來實作的

1. 由于 JavaScript 的限制，這個 Object.defineProperty() api 沒辦法監聽陣列長度的變化，也不能檢測陣列和物件的新增變化，
2. Vue 無法檢測通過陣列索引直接改變陣列項的操作，這不是 Object.defineProperty() api 的原因，而是尤大認為性能消耗與帶來的用戶體驗不成正比，對陣列進行回應式檢測會帶來很大的性能消耗，因為陣列項可能會大，比如1000條、10000條，

回應式原理

回應式基本原理就是，在 Vue 的建構式中，對 options 的 data 進行處理，即在初始化vue實體的時候，對data、props等物件的每一個屬性都通過 Object.defineProperty 定義一次，在資料被set的時候，做一些操作，改變相應的視圖，

資料觀測

讓我們基于 Object.defineProperty 來實作一下對陣列和物件的劫持，

import { newArrayProto } from './array'

class Observer {
  constructor(data){
    if (Array.isArray(data)) {
      // 這里我們可以重寫可以修改陣列本身的方法 7個方法，切片編程：需要保留陣列原有的特性，并且可以重寫部分方法
      data.__proto__ = newArrayProto
      this.observeArray(data) // 如果陣列中放的是物件 可以監控到物件的變化
    } else {
      this.walk(data)
    }
  }
  // 回圈物件"重新定義屬性",對屬性依次劫持，性能差
  walk(data) {
    Object.keys(data).forEach(key => defineReactive(data, key, data[key]))
  }
  // 觀測陣列
  observeArray(data) {
    data.forEach(item => observe(item))
  }
}

function defineReactive(data,key,value){
  observe(value)  // 深度屬性劫持，對所有的物件都進行屬性劫持

  Object.defineProperty(data,key,{
    get(){
      return value
    },
    set(newValue){
      if(newValue =https://www.cnblogs.com/burc/archive/2023/03/24/= value) return
      observe(newValue) // 修改屬性之后重新觀測，目的：新值為物件或陣列的話，可以劫持其資料
      value = newValue
    }
  })
}

export function observe(data) {
  // 只對物件進行劫持
  if(typeof data !=='object' || data =https://www.cnblogs.com/burc/archive/2023/03/24/= null){
    return
  }
  return new Observer(data)
}

重寫陣列7個變異方法

7個方法是指：push、pop、shift、unshift、sort、reverse、splice，（這七個都是會改變原陣列的）

實作思路：面向切片編程！！！

不是直接粗暴重寫 Array.prototype 上的方法，而是通過原型鏈繼承與函式劫持進行的移花接木，

利用 Object.create(Array.prototype) 生成一個新的物件 newArrayProto，該物件的 __proto__指向 Array.prototype，然后將我們陣列的 __proto__指向擁有重寫方法的新物件 newArrayProto，這樣就保證了 newArrayProto 和 Array.prototype 都在陣列的原型鏈上，

arr.__proto__ === newArrayProto；newArrayProto.__proto__ === Array.prototype

然后在重寫方法的內部使用 Array.prototype.push.call 呼叫原來的方法，并對新增資料進行劫持觀測，

let oldArrayProto = Array.prototype // 獲取陣列的原型

export let newArrayProto = Object.create(oldArrayProto)

// 找到所有的變異方法
let methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice']

methods.forEach(method => {
  // 這里重寫了陣列的方法
  newArrayProto[method] = function (...args) {
    // args reset引數收集，args為真正陣列，arguments為偽陣列
    const result = oldArrayProto[method].call(this, ...args) // 內部呼叫原來的方法，函式的劫持，切片編程

    // 我們需要對新增的資料再次進行劫持
    let inserted
    let ob = this.__ob__

    switch (method) {
      case 'push':
      case 'unshift': // arr.unshift(1,2,3)
        inserted = args
        break
      case 'splice': // arr.splice(0,1,{a:1},{a:1})
        inserted = args.slice(2)
      default:
        break
    }

    if (inserted) {
      // 對新增的內容再次進行觀測
      ob.observeArray(inserted)
    }
    return result
  }
})

增加__ob__屬性

這是一個惡心又巧妙的屬性，我們在 Observer 類內部，把 this 實體添加到了回應式資料上，相當于給所有回應式資料增加了一個標識，并且可以在回應式資料上獲取 Observer 實體上的方法

class Observer {
  constructor(data) {
    // data.__ob__ = this // 給資料加了一個標識 如果資料上有__ob__ 則說明這個屬性被觀測過了
    Object.defineProperty(data, '__ob__', {
      value: this,
      enumerable: false, // 將__ob__ 變成不可列舉 （回圈的時候無法獲取到，防止堆疊溢位）
    })

    if (Array.isArray(data)) {
      // 這里我們可以重寫可以修改陣列本身的方法 7個方法，切片編程：需要保留陣列原有的特性，并且可以重寫部分方法
      data.__proto__ = newArrayProto
      this.observeArray(data) // 如果陣列中放的是物件 可以監控到物件的變化
    } else {
      this.walk(data)
    }
  }

}

__ob__有兩大用處：

1. 如果一個物件被劫持過了，那就不需要再被劫持了，要判斷一個物件是否被劫持過，可以通過__ob__來判斷

// 資料觀測
export function observe(data) {
  // 只對物件進行劫持
  if (typeof data !== 'object' || data =https://www.cnblogs.com/burc/archive/2023/03/24/= null) {
    return
  }

  // 如果一個物件被劫持過了，那就不需要再被劫持了 (要判斷一個物件是否被劫持過，可以在物件上增添一個實體，用實體的原型鏈來判斷是否被劫持過)
  if (data.__ob__ instanceof Observer) {
    return data.__ob__
  }

  return new Observer(data)
}

2. 我們重寫了陣列的7個變異方法，其中 push、unshift、splice 這三個方法會給陣列新增成員，此時需要對新增的成員再次進行觀測，可以通過__ob__呼叫 Observer 實體上的 observeArray 方法

標籤：其他

上一篇：vue全家桶進階之路2：JavaScript

下一篇：vue全家桶進階之路4：NPM包