【原始碼系列#01】vue3響應式原理（Proxy）

柏成發表於2023-11-20
原始碼Vue

專欄分享：vue2原始碼專欄，vue3原始碼專欄，vue router原始碼專欄，玩具專案專欄，硬核?推薦?
歡迎各位ITer關注點贊收藏???

在學習 Vue3 是如何進行物件的響應式代理之前，我想我們應該先去了解下 ES6 新增的API Proxy 與 Reflect，可參考【Vue3響應式入門#02】Proxy and Reflect 。之後我們再手寫下 reactive 和 effect 的原始碼

Reactive

定義: 接收一個普通物件然後返回該普通物件的響應式代理。等同於 2.x 的 Vue.observable()

const obj = reactive({ count: 0 })

響應式轉換是“深層的”：會影響物件內部所有巢狀的屬性。基於 ES6 的 Proxy 實現，返回的代理物件不等於原始物件。建議僅使用代理物件而避免依賴原始物件。

reactive.ts

Vue3中響應資料核心是 reactive ， reactive 中的實現是由 proxy 加 effect 組合，先來看一下 reactive 方法的定義

import { isObject } from '@vue/shared'
import { mutableHandlers, ReactiveFlags } from './baseHandler'

// key只能是物件；弱引用，更有效的垃圾回收、釋放記憶體 - https://www.zhangxinxu.com/wordpress/2021/08/js-weakmap-es6/
const reactiveMap = new WeakMap()

/**
 * @desc 將資料轉化成響應式的資料
 */
export function reactive(target) {
  // issue1
  if (!isObject(target)) {
    return
  }

  // issue2
  if (target[ReactiveFlags.IS_REACTIVE]) {
    return target
  }

  // issue3
  let existingProxy = reactiveMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  const proxy = new Proxy(target, mutableHandlers)
  reactiveMap.set(target, proxy)
  return proxy
}

  • @issue1 只能做物件的代理，不是物件，return

  • @issue2 代理物件被再次代理 可以直接返回代理物件

    我們可以利用 Proxy 的 get方法，來判斷他有沒有代理過

    如果訪問這個物件的 __v_isReactive 屬性，有值就說明代理過了，當然，我們可以約定 __v_isReactive為任何欄位

  • @issue3 同一個物件代理多次，返回同一個代理

    用 WeakMap去快取物件和代理物件的對映關係

    代理完成時，將此物件和代理物件新增到 WeakMap快取中；在代理之前，去 WeakMap中讀取此物件是否有代理物件的對映，若存在，則返回快取中的代理物件

WeakMap：key只能是物件；弱引用，更有效的垃圾回收、釋放記憶體，詳情請參考JS WeakMap應該什麼時候使用 « 張鑫旭-鑫空間-鑫生活

baseHandler.ts

mutableHandlers 是 Proxy 的第二個引數 handler物件提取封裝而來

  • track () 依賴收集
  • trigger () 觸發依賴

這兩個函式為 effect 裡的方法，effect 為 reactive 的核心，後面我們會詳細介紹。先來看一下mutableHandlers 物件的定義

import { track, trigger } from './effect'

export const enum ReactiveFlags {
  IS_REACTIVE = '__v_isReactive',
}

export const mutableHandlers = {
  // 這裡可以監控到使用者取值了
  get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return true
    }

    track(target, 'get', key)
    let res = Reflect.get(target, key, receiver)

    // @issue1 
    // 深度代理實現, 效能好 取值就可以進行代理
    if (isObject(res)) {
      return reactive(res)
    }
    return res
  },
  
  // 這裡可以監控到使用者設定值了
  set(target, key, value, receiver) {
    let oldValue = target[key] // 快取老值
    let result = Reflect.set(target, key, value, receiver)
    
    if (oldValue !== value) {
      // 值變化了，觸發依賴
      trigger(target, 'set', key)
    }
    return result
  },
}

  • @issue1 巢狀物件深度代理。只有在取值時，才會進行深度代理，效能好

    舉個例子，看如下程式碼。當我們對巢狀物件 product.rate 進行取值時，就會觸發 get劫持，然後深度代理巢狀物件 product.rate

const product = reactive({
  price: 5,
  quantity: 2,
  rate: {
    value: 0.9
  }
})

shared.ts

共享模組

// 判斷是否是JS物件
export const isObject = function(value){
  return typeof value === 'object' && value !== null
}

參考資料

JS WeakMap應該什麼時候使用 « 張鑫旭-鑫空間-鑫生活

相關文章