使用proxy 給狀態(tài)加一個跟蹤功能

上一篇介紹了一個自己做的輕量級的狀態(tài)管理，好多網(wǎng)友說，狀態(tài)主要的是跟蹤功能，不能跟蹤算啥狀態(tài)管理？

因為vue3的狀態(tài)都是 reactive的形式，也就是proxy，原本以為會自動跟蹤功能的，但是后來發(fā)現(xiàn)，好像沒有。

那么不管他有沒有了，自己加上好了。

跟蹤的兩種方式

  • 不記錄調(diào)用者
    只記錄修改了哪個屬性，和屬性值，還有時間，其他的不管了。這個比較簡單，直接套娃即可。

  • 全套
    不知道是誰（組件）觸發(fā)的狀態(tài)改變，總覺得這個跟蹤沒啥用，所以還是希望要做就做全套，把調(diào)用者記錄下來才是王道。
    目前沒啥好辦法，還需要組件在使用的時候，多加一行，再設(shè)置個參數(shù)才能實現(xiàn)。

用 proxy 套娃 reactive，實現(xiàn)跟蹤功能

我們先定義一個函數(shù)實現(xiàn)一個proxy，加上跟蹤功能。

/**
 * 帶跟蹤的reactive。使用 proxy 套娃
 * @param {reactive} _target  要攔截的目標(biāo) reactive
 * @param {string} flag 使用狀態(tài)者的標(biāo)記
 * @param {array} log 存放跟蹤記錄的數(shù)組
 */
export default function trackReactive (_target, flag, log) {
  const proxy = new Proxy(_target, {
    get: function (target, key, receiver) {
      log.push({
        caller: flag, // 調(diào)用者
        type: 'get', // 獲取或者設(shè)置
        time: new Date().valueOf(), // 獲取時間
        target: target, // 目標(biāo)
        key: key, // 讀取的屬性名稱
        value: target[key] // 讀取得到的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免數(shù)組太大
      }
      // 調(diào)用原型方法
      return Reflect.get(target, key, receiver)
    },
    set: function (target, key, value, receiver) {
      log.push({
        caller: flag, // 調(diào)用者
        type: 'set', // 獲取或者設(shè)置
        time: new Date().valueOf(), // 獲取時間
        target: target, // 目標(biāo)
        key: key, // 設(shè)置的屬性名稱
        value: value // 設(shè)置的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免數(shù)組太大
      }
      // 調(diào)用原型方法
      return Reflect.set(target, key, value, target)
    }
  })
  // 返回實例
  return proxy
}

比較簡單的 proxy 的應(yīng)用，攔截 get 和 set 操作，把需要的信息寫入log。

使用方式

如果直接使用，無法記錄調(diào)用者是誰，所以需要用函數(shù)的方式獲取。


// 測試全局狀態(tài)
const { state, track, globalLog } = nfStore.useStore()

// 直接獲取，無跟蹤
const user = state.userOnline
// 帶跟蹤的獲取方式
const user2 = track.userOnline('首頁測試')
// 修改測試
setTimeout(() => {
  user2.name = '測試修改。。。'
  console.log(globalLog)
}, 2000)

看看效果

我們來看看運行效果：

跟蹤日志

我們可以看到確實記錄了狀態(tài)的變化，但是這個日志似乎有點多。我只是簡單的把狀態(tài)放在模板里，居然get了這么多次。

看來需要做做減法，去掉不需要的記錄。

只記錄關(guān)心的。


import { reactive } from 'vue'

/**
 * 帶跟蹤的reactive。使用 proxy 套娃
 * @param {reactive} _target  要攔截的目標(biāo) reactive
 * @param {string} flag 使用狀態(tài)者的標(biāo)記
 * @param {array} log 存放跟蹤記錄的數(shù)組
 */
export default function trackReactive (_target, flag, log) {
  const proxy = new Proxy(_target, {
    get: function (target, key, receiver) {
      if (typeof key !== 'symbol') {
        console.log(`getting ${key}!`, target[key])
        switch (key) {
          case '__v_isRef':
          case 'toString':
          case 'toJSON':
            // 不記錄
            break
          default:
            log.push({
              _caller: flag, // 調(diào)用者
              type: 'get', // 獲取或者設(shè)置
              time: new Date().valueOf(), // 獲取時間
              target: target, // 目標(biāo)
              _key: key, // 讀取的屬性名稱
              _value: target[key] // 讀取得到的值
            })
            if (log.length > 300) {
              log.splice(0, 50) // 避免數(shù)組太大
            }
        }
      }
      // 調(diào)用原型方法
      return Reflect.get(target, key, receiver)
    },
    set: function (target, key, value, receiver) {
      console.log(`setting ${key}：${value}!`)
      console.log('target--', target)
      console.log('receiver--', receiver)
      // console.log(target == receiver)
      log.push({
        _caller: flag, // 調(diào)用者
        type: 'set', // 獲取或者設(shè)置
        time: new Date().valueOf(), // 獲取時間
        target: target, // 目標(biāo)
        _key: key, // 設(shè)置的屬性名稱
        _value: value // 設(shè)置的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免數(shù)組太大
      }
      // 調(diào)用原型方法
      return Reflect.set(target, key, value, target)
    }
  })
  // 返回實例
  return proxy
}

加上下劃線，是打印的時候自動排序好看一點。

再來看看效果

記錄關(guān)系的變化

這下就清涼多了，只有三條記錄，第一個是模板獲取狀態(tài)，然后是settimeout里面修改狀態(tài)，最后是模板更新狀態(tài)的顯示。

  • target 修改了哪個狀態(tài)
  • time 修改狀態(tài)的時間戳
  • type 是讀取還是設(shè)置
  • _caller 調(diào)用者的flag（需要手動設(shè)置）
  • _key 修改/讀取的屬性的名稱
  • _value 修改/讀取的屬性值

基本全套了。

嵌套屬性怎么辦？

雖然 proxy 可以攔截操作，但是并不能攔截嵌套屬性的操作。也就是說 proxy 其實是淺層的。

可能你會覺得，不對呀，reactive 明明是深層響應(yīng)的，怎么就淺層了？

那是因為reactive在get里面做了“手腳”。

看上面我們寫的代碼，你也許會覺得奇怪，記錄狀態(tài)變化，為啥要攔截get？這個就是為了嵌套屬性做準(zhǔn)備。

先測試一下嵌套屬性的操作

// 測試全局狀態(tài)
const { state, track, globalLog } = nfStore.useStore()

// 直接獲取，無跟蹤
const user = state.userOnline
// 帶跟蹤的獲取方式
const user2 = track.userOnline('首頁測試')
user2.aa = {
  aa1: '測試嵌套',
  aa2: '還是'
}
// 修改測試
setTimeout(() => {
  // user2.name = '測試修改。。。'
  user2.aa.aa1 = '測試嵌套屬性的修改。。。'
  console.log(globalLog)
}, 2000)

修改嵌套屬性的運行效果

修改嵌套屬性

只記錄到一開始設(shè)置 aa 屬性的操作，后面就都是 get 的操作，沒有 set 的操作。
果然不支持深層操作。

再看看 reactive 內(nèi)部是如何實現(xiàn)的。

function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        if (key === "__v_isReactive" /* IS_REACTIVE */) {
            return !isReadonly;
        }
        else if (key === "__v_isReadonly" /* IS_READONLY */) {
            return isReadonly;
        }
        else if (key === "__v_raw" /* RAW */ &&
            receiver ===
                (isReadonly
                    ? shallow
                        ? shallowReadonlyMap
                        : readonlyMap
                    : shallow
                        ? shallowReactiveMap
                        : reactiveMap).get(target)) {
            return target;
        }
        const targetIsArray = isArray(target);
        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
            return Reflect.get(arrayInstrumentations, key, receiver);
        }
        const res = Reflect.get(target, key, receiver);
        if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
            return res;
        }
        if (!isReadonly) {
            track(target, "get" /* GET */, key);
        }
        if (shallow) {
            return res;
        }
        if (isRef(res)) {
            // ref unwrapping - does not apply for Array + integer key.
            const shouldUnwrap = !targetIsArray || !isIntegerKey(key);
            return shouldUnwrap ? res.value : res;
        }
        if (isObject(res)) {
            // Convert returned value into a proxy as well. we do the isObject check
            // here to avoid invalid value warning. Also need to lazy access readonly
            // and reactive here to avoid circular dependency.
            return isReadonly ? readonly(res) : reactive(res);
        }
        return res;
    };
}

簡單的說，先獲取屬性值，然后判斷類型，如果是對象，那么套上 reactive 再 return。這樣就變成深層響應(yīng)了。

改進代碼支持嵌套屬性的修改

我們效仿一下，在 get 里面繼續(xù)套娃：

// 調(diào)用原型方法
const res = Reflect.get(target, key, receiver)
if (isReactive(res)) {
  return trackReactive(res, flag, log)
}
return res

還是要判斷一下類型，只是不用那么復(fù)雜的判斷，只需要判斷是不是 reactive：

  • 是reactive，套個娃再返回。
  • 不是 reactive，那么大概是基礎(chǔ)類型直接返回就好。

嵌套屬性的跟蹤記錄效果

嵌套屬性的跟蹤記錄

現(xiàn)在可以記錄全套了，嵌套屬性也逃不掉。

能想到的都實現(xiàn)了，如果有啥遺漏的地方，還請大家補充。

one more thing

最后還是沒有摟住，又加了一個小功能，就是修改嵌套屬性的時候，如何根據(jù)日志看出來到底修改的是哪個狀態(tài)。

看看上面的日志，雖然可以得到要修改的屬性的名稱，
但是這個屬性是第幾層的？上一級的屬性名稱是啥？能不能依次找到最上一級的屬性？

各種折騰終于加上這個功能。

設(shè)計一個三層的狀態(tài)，然后修改cc1看看效果：

// 帶跟蹤的獲取方式
const user2 = track.userOnline('首頁測試')
user2.aa = {
  aa1: '測試嵌套',
  aa2: {
    cc1: '第三層屬性'
  }
}
// 修改測試
setTimeout(() => {
  // user2.name = '測試修改。。。'
  user2.aa.aa1 = '測試嵌套屬性的修改。。。'
  console.log('path - aa1 :', globalLog[globalLog.length - 2].targetPath, globalLog[globalLog.length - 1]._key)
  user2.aa.aa2.cc1 = '屬性3的修改'
  console.log('path - cc1 :', globalLog[globalLog.length - 2].targetPath, globalLog[globalLog.length - 1]._key)
  console.log(globalLog)
}, 2000)

然后我們看看日志：

往上找
path

跟蹤記錄里面增加了一個path的功能，可以記錄各級屬性名稱。

  • targetBase： 最上級的狀態(tài)
  • targetName： target 對應(yīng)的屬性名稱
  • target：當(dāng)前要獲取的屬性
  • _key：當(dāng)前要獲取的屬性名稱
  • targetPath：從 targetBase 開始的屬性名組成的路徑

加上定位功能

感謝知乎好友的幫助，增加了一個可以直接定位到修改屬性的代碼的功能。

在 set 里面 加上 const stack = new Error() ，然后記入 targetPath 即可。
原本 set 的 log 里沒有記錄這個 path，現(xiàn)在正好用上了。

定位效果

可以定位
狀態(tài)變化日志

可以遍歷找到 set 的記錄，找到 targetPath 屬性然后 console.log 就可以定位了。
開發(fā)階段可以直接定位，生產(chǎn)模式（客戶）可以上傳日志進行各種分析。

源碼

如果感興趣的話，可以到這來看完整代碼

https://gitee.com/naturefw/nf-plat-vite2-vue3

https://gitee.com/naturefw/nf-plat-vite2-vue3/tree/master/packages/nf-state

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,502評論 19贊 139
  • Getting Started Burp Suite 是用于攻擊web 應(yīng)用程序的集成平臺。它包含了許多工具，并為...
    Eva_chenx閱讀 29,231評論 0贊 14
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架，建立于...
    Hsinwong閱讀 22,931評論 1贊 92
  • vite腳手架創(chuàng)建項目 1、全局安裝vite腳手架 2、使用腳手架創(chuàng)建項目 3、進入項目文件夾 4、安裝依賴 5、...
    微芒不朽閱讀 5,663評論 0贊 19
  • 16宿命：用概率思維提高你的勝算 以前的我是風(fēng)險厭惡者，不喜歡去冒險，但是人生放棄了冒險，也就放棄了無數(shù)的可能。 ...
    yichen大刀閱讀 7,542評論 0贊 4

友情鏈接更多精彩內(nèi)容