Day 28 - shallowRef、shallowReactive - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 28

Vue.js

從零到一打造 Vue3 響應式系統系列第 28 篇

Day 28 - shallowRef、shallowReactive

17th鐵人賽

heyrian

2025-10-07 11:20:04

69 瀏覽

分享至

banner

ref 與 reactive 都屬於深層響應的 API 。它們會遞迴地將內部所有巢狀物件都轉換為響應式代理。多數情況下非常方便，但當處理大型資料結構時，這種深度監聽的效能開銷可能會造成瓶頸。這時候我們就會使用到 shallowRef 或 shallowReactive：

ShallowRef

shallowRef 會建立一個 ref，但只對 .value 屬性本身的賦值操作具有響應性，它並不會將 .value 的內容轉換為響應式物件。

<body>
  <div id="app"></div>
  <script type="module">
    import {  shallowReactive, shallowRef, effect } from '../../../node_modules/vue/dist/vue.esm-browser.js'
    // import { reactive, effect, toRefs } from '../dist/reactivity.esm.js'

    const c = shallowRef({
        count: 1
    });

    effect(() => {
      console.log(c.value.count)
    })

    setTimeout(() => {
      c.value.count++
    }, 1000)
  </script>
</body>

查看上述程式碼，你會觀察到effect只輸出一次，然而一秒鐘後setTimeout，並沒有輸出第二次。

如果希望輸出第二次的話，必須要把c.value.count++更改為c.value = { count: 2 }。

day28-01

day28-02

依照慣例我們可以看到，console.log(c)的結果，他是屬於一個 RefImpl 類別的物件，但差異性是__v_isShallow是true，由此我們可以知道它們是一樣的東西，但是透過這個標記來告訴類別說，我們現在這個物件是不是屬於淺層響應式物件。

// 如果 value 是物件，則使用 reactive 轉換為響應式物件
const convert = (value) => isObject(value) ? reactive(value) : value

class RefImpl implements Dependency{
  _value;
  [ReactiveFlags.IS_REF] = true
  private _isShallow: boolean

  subs: Link
  subsTail: Link
  constructor(value, isShallow) {
    // 如果 isShallow 是 true，代表屬於淺層物件，直接回傳
    this._value = isShallow ? value : convert(value)
  }

  get value() {
    if (activeSub) {
      trackRef(this)
    }
    return this._value
  }

  set value(newValue) {
    // 如果新值和舊值發生過變化，則更新
    if(hasChanged(newValue, this._value)){
      // 如果 isShallow 是 true，代表屬於淺層物件，直接回傳
      this._value = this._isShallow ? newValue : convert(newValue)
      triggerRef(this)
    }
  }
}

所以我們的實現思路是這樣：

幫RefImpl 類別增加一個 private 的 _isShallow 屬性
將「檢查值是否為物件，若是則用reactive 轉換」的邏輯封裝成 convert 函式。
在constructor 和 setter 中，根據 _isShallow 標記來決定是直接賦值，還是要經過 convert 函式處理。

ShallowReactive

shallowReactive 只對物件的第一層屬性進行代理，任何對巢狀物件的修改都不會觸發響應。

<body>
  <div id="app"></div>
  <script type="module">
    import {  shallowReactive, shallowRef, effect } from '../../../node_modules/vue/dist/vue.esm-browser.js'
    // import { reactive, effect, toRefs } from '../dist/reactivity.esm.js'

    const state = shallowReactive({
      a:1,
      b:{
        c:1
      }
    })

    effect(() => {
      console.log(state.b.c)
    })

    setTimeout(() => {
      state.b.c++
    }, 1000)
  </script>
</body>

shallowReactive 也是一樣的效果，state.b.c++沒有反應，需要變更為state.b = { c: 2 } }，effect才會觸發輸出。

reactive 是通過mutableHandlers來處理，因此我們需要先重構這個mutableHandlers：

// baseHandlers.ts
const set = (target, key, newValue, receiver) => {
 ...
 ...
}

const get = (target, key, receiver) => {
		// 收集依賴：綁定target的屬性與effect的關係
    track(target, key)
    const res = Reflect.get(target, key,receiver)
    // 如果 res 是一個 ref，則返回 res.value
    if(isRef(res)){
      // target = {a:ref(0)}
      return res.value
    }

    if(isObject(res)){
      /**
       * 如果 res 是物件，則將其轉換為響應式物件
       */
      return reactive(res)
    }
    return res
}

export const mutableHandlers = {
  get,
  set
}

先將 getter 跟 setter 抽出來，再來調整 getter。

function createGetter(isShallow = false) {
  return function get(target, key, receiver) {
    track(target, key)
    const res = Reflect.get(target, key, receiver)
    if (isRef(res)) {
      return res.value
    }

    if (isObject(res)) {
      // 關鍵：如果是 shallow，直接回傳原始物件，不再遞迴呼叫 reactive
      return isShallow ? res : reactive(res)
    }
    return res
  }
}

const get = createGetter()

我們將get 的邏輯抽離成一個工廠函式 createGetter，並用 isShallow 參數來控制是否要遞迴地將巢狀物件轉換為 reactive 。

const shallowGet = createGetter(true)

export const shallowReactiveHandlers = {
  get: shallowGet,
  set
}

建立不同 handler 並導出，之後我們在reactive.ts 引入

//reactive.ts
import { mutableHandlers, shallowReactiveHandlers } from './baseHandlers'

function createReactiveObject(target, handlers, proxyMap) {

  if (!isObject(target)) return target

  // 如果這個 target 儲存在 reactiveSet 中
  // 表示 target 是一個響應式物件，直接返回已經建立好的 proxy
  if(reactiveSet.has(target)){
    return proxyMap.get(target)
  }

  // 如果這個 target 已經被 reactive 過了，直接返回已經建立好的 proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  // 根據傳入參數 handler，建立 target 的代理物件
  const proxy = new Proxy(target, handlers)

  // 儲存 target 和響應式物件的關聯關係
  proxyMap.set(target, proxy)

  reactiveSet.add(proxy)

  return proxy
}

調整createReactiveObject函式，讓它可以根據 handler 以及 proxyMap 來決定是不是要建立深層響應式物件。

//reactive.ts

// 新增 shallowReactive 的快取
const shallowReactiveMap = new WeakMap()

export function reactive(target) {
  return createReactiveObject(target, mutableHandlers, reactiveMap)
}

// 新增 shallowReactive 函式
export function shallowReactive(target) {
  return createReactiveObject(target, shallowReactiveHandlers, shallowReactiveMap)
}

這樣我們就完成了 shallowReactive，現在shallowReactive以及shallowRef都已經完成。

「深層響應」為帶來了開發上的便利，而「淺層響應」則讓我們有更近一步優化效能的機會。在一般開發過程中，我們應該優先使用 ref 和 reactive，當遇到明確的效能瓶頸時，可以觀察我們自己在使用資料的情況，適度替換成shallow 版本。

同步更新《嘿，日安！》技術部落格