上一篇 https://www.cnblogs.com/jyk/p/14706005.html 介紹了一個自己做的輕量級的狀態管理，好多網友說，狀態最重要的是跟蹤功能，不能跟蹤算啥狀態管理？

因為vue3的狀態都是 reactive 的形式，也就是 proxy，原本以為有自動跟蹤的功能，但是後來發現，好像沒有。

不管他有沒有了，我們自己加上好了。

跟蹤的兩種方式

  • 不記錄呼叫者

    只記錄修改了哪個屬性，和屬性值，還有時間，其他的不管了。這個比較簡單，直接套娃即可。

  • 全套

    不知道是誰（元件）觸發的狀態改變，總覺得這個跟蹤沒啥大用處，所以還是希望要做就做全套，把呼叫者記錄下來才是王道。

    目前沒啥好辦法，還需要元件在使用的時候，多加一行，再設定個引數才能實現。

用 proxy 套娃 reactive，實現跟蹤功能

我們先定義一個函式實現一個 proxy，加上跟蹤功能。

  1. /**
  2.  * 帶跟蹤的reactive。使用 proxy 套娃
  3.  * @param {reactive} _target  要攔截的目標 reactive
  4.  * @param {string} flag 使用狀態者的標記
  5.  * @param {array} log 存放跟蹤記錄的陣列
  6.  */
  7. export default function trackReactive (_target, flag, log) {
  8.   const proxy = new Proxy(_target, {
  9.     get: function (target, key, receiver) {
  10.       log.push({
  11.         caller: flag, // 呼叫者
  12.         type: 'get', // 獲取或者設定
  13.         time: new Date().valueOf(), // 獲取時間
  14.         target: target, // 目標
  15.         key: key, // 讀取的屬性名稱
  16.         value: target[key] // 讀取得到的值
  17.       })
  18.       if (log.length > 300) {
  19.         log.splice(0, 50) // 避免陣列太大
  20.       }
  21.       // 呼叫原型方法
  22.       return Reflect.get(target, key, receiver)
  23.     },
  24.     set: function (target, key, value, receiver) {
  25.       log.push({
  26.         caller: flag, // 呼叫者
  27.         type: 'set', // 獲取或者設定
  28.         time: new Date().valueOf(), // 獲取時間
  29.         target: target, // 目標
  30.         key: key, // 設定的屬性名稱
  31.         value: value // 設定的值
  32.       })
  33.       if (log.length > 300) {
  34.         log.splice(0, 50) // 避免陣列太大
  35.       }
  36.       // 呼叫原型方法
  37.       return Reflect.set(target, key, value, target)
  38.     }
  39.   })
  40.   // 返回例項
  41.   return proxy
  42. }

比較簡單的 proxy 的應用，攔截 get 和 set 操作，把需要的資訊寫入log。

使用方式

如果直接使用，無法記錄呼叫者是誰，所以需要用函式的方式獲取。


  2. // 測試全域性狀態
  3. const { state, track, globalLog } = nfStore.useStore()
  5. // 直接獲取，無跟蹤
  6. const user = state.userOnline
  7. // 帶跟蹤的獲取方式
  8. const user2 = track.userOnline('首頁測試')
  9. // 修改測試
  10. setTimeout(() => {
  11.   user2.name = '測試修改。。。'
  12.   console.log(globalLog)
  13. }, 2000)

看看效果

我們來看看執行效果：

我們可以看到確實記錄了狀態的變化，但是這個日誌似乎有點多。我只是簡單的把狀態放在模板裡，居然get了這麼多次。

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

只記錄關心的。


  2. import { reactive } from 'vue'
  4. /**
  5.  * 帶跟蹤的reactive。使用 proxy 套娃
  6.  * @param {reactive} _target  要攔截的目標 reactive
  7.  * @param {string} flag 使用狀態者的標記
  8.  * @param {array} log 存放跟蹤記錄的陣列
  9.  */
  10. export default function trackReactive (_target, flag, log) {
  11.   const proxy = new Proxy(_target, {
  12.     get: function (target, key, receiver) {
  13.       if (typeof key !== 'symbol') {
  14.         console.log(`getting ${key}!`, target[key])
  15.         switch (key) {
  16.           case '__v_isRef':
  17.           case 'toString':
  18.           case 'toJSON':
  19.             // 不記錄
  20.             break
  21.           default:
  22.             log.push({
  23.               _caller: flag, // 呼叫者
  24.               type: 'get', // 獲取或者設定
  25.               time: new Date().valueOf(), // 獲取時間
  26.               target: target, // 目標
  27.               _key: key, // 讀取的屬性名稱
  28.               _value: target[key] // 讀取得到的值
  29.             })
  30.             if (log.length > 300) {
  31.               log.splice(0, 50) // 避免陣列太大
  32.             }
  33.         }
  34.       }
  35.       // 呼叫原型方法
  36.       return Reflect.get(target, key, receiver)
  37.     },
  38.     set: function (target, key, value, receiver) {
  39.       console.log(`setting ${key}：${value}!`)
  40.       console.log('target--', target)
  41.       console.log('receiver--', receiver)
  42.       // console.log(target == receiver)
  43.       log.push({
  44.         _caller: flag, // 呼叫者
  45.         type: 'set', // 獲取或者設定
  46.         time: new Date().valueOf(), // 獲取時間
  47.         target: target, // 目標
  48.         _key: key, // 設定的屬性名稱
  49.         _value: value // 設定的值
  50.       })
  51.       if (log.length > 300) {
  52.         log.splice(0, 50) // 避免陣列太大
  53.       }
  54.       // 呼叫原型方法
  55.       return Reflect.set(target, key, value, target)
  56.     }
  57.   })
  58.   // 返回例項
  59.   return proxy
  60. }

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

再來看看效果

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

  • target 修改了哪個狀態
  • time 修改狀態的時間戳
  • type 是讀取還是設定
  • _caller 呼叫者的flag（需要手動設定）
  • _key 修改/讀取的屬性的名稱
  • _value 修改/讀取的屬性值

基本全套了。

巢狀屬性怎麼辦？

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

可能你會覺得，不對呀，reactive 明明是深層響應的，怎麼就淺層了？

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

看上面我們寫的程式碼，你也許會覺得奇怪，記錄狀態變化，為啥要攔截get？這個就是為了巢狀屬性做準備。

先測試一下巢狀屬性的操作

  1. // 測試全域性狀態
  2. const { state, track, globalLog } = nfStore.useStore()
  4. // 直接獲取，無跟蹤
  5. const user = state.userOnline
  6. // 帶跟蹤的獲取方式
  7. const user2 = track.userOnline('首頁測試')
  8. user2.aa = {
  9.   aa1: '測試巢狀',
  10.   aa2: '還是'
  11. }
  12. // 修改測試
  13. setTimeout(() => {
  14.   // user2.name = '測試修改。。。'
  15.   user2.aa.aa1 = '測試巢狀屬性的修改。。。'
  16.   console.log(globalLog)
  17. }, 2000)

修改巢狀屬性的執行效果

只記錄到一開始設定 aa 屬性的操作，後面就都是 get 的操作，沒有 set 的操作。

果然不支援深層操作。

再看看 reactive 內部是如何實現的。

  1. function createGetter(isReadonly = false, shallow = false) {
  2.     return function get(target, key, receiver) {
  3.         if (key === "__v_isReactive" /* IS_REACTIVE */) {
  4.             return !isReadonly;
  5.         }
  6.         else if (key === "__v_isReadonly" /* IS_READONLY */) {
  7.             return isReadonly;
  8.         }
  9.         else if (key === "__v_raw" /* RAW */ &&
  10.             receiver ===
  11.                 (isReadonly
  12.                     ? shallow
  13.                         ? shallowReadonlyMap
  14.                         : readonlyMap
  15.                     : shallow
  16.                         ? shallowReactiveMap
  17.                         : reactiveMap).get(target)) {
  18.             return target;
  19.         }
  20.         const targetIsArray = isArray(target);
  21.         if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
  22.             return Reflect.get(arrayInstrumentations, key, receiver);
  23.         }
  24.         const res = Reflect.get(target, key, receiver);
  25.         if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
  26.             return res;
  27.         }
  28.         if (!isReadonly) {
  29.             track(target, "get" /* GET */, key);
  30.         }
  31.         if (shallow) {
  32.             return res;
  33.         }
  34.         if (isRef(res)) {
  35.             // ref unwrapping - does not apply for Array + integer key.
  36.             const shouldUnwrap = !targetIsArray || !isIntegerKey(key);
  37.             return shouldUnwrap ? res.value : res;
  38.         }
  39.         if (isObject(res)) {
  40.             // Convert returned value into a proxy as well. we do the isObject check
  41.             // here to avoid invalid value warning. Also need to lazy access readonly
  42.             // and reactive here to avoid circular dependency.
  43.             return isReadonly ? readonly(res) : reactive(res);
  44.         }
  45.         return res;
  46.     };
  47. }

簡單的說，先獲取屬性值，然後判斷型別，如果是物件，那麼套上 reactive 再 return。這樣就變成深層響應了。

改進程式碼支援巢狀屬性的修改

我們效仿一下，在 get 裡面繼續套娃：

  1. // 呼叫原型方法
  2. const res = Reflect.get(target, key, receiver)
  3. if (isReactive(res)) {
  4.   return trackReactive(res, flag, log)
  5. }
  6. return res

還是要判斷一下型別，只是不用那麼複雜的判斷，只需要判斷是不是 reactive：

  • 是reactive，套個娃再返回。
  • 不是 reactive，那麼大概是基礎型別直接返回就好。

巢狀屬性的跟蹤記錄效果

現在可以記錄全套了，巢狀屬性也逃不掉。

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

one more thing

最後還是沒有摟住，又加了一個小功能，就是修改巢狀屬性的時候，如何根據日誌看出來到底修改的是哪個狀態。

看看上面的日誌，雖然可以得到要修改的屬性的名稱，

但是這個屬性是第幾層的？上一級的屬性名稱是啥？能不能依次找到最上一級的屬性？

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

設計一個三層的狀態，然後修改cc1看看效果：

  1. // 帶跟蹤的獲取方式
  2. const user2 = track.userOnline('首頁測試')
  3. user2.aa = {
  4.   aa1: '測試巢狀',
  5.   aa2: {
  6.     cc1: '第三層屬性'
  7.   }
  8. }
  9. // 修改測試
  10. setTimeout(() => {
  11.   // user2.name = '測試修改。。。'
  12.   user2.aa.aa1 = '測試巢狀屬性的修改。。。'
  13.   console.log('path - aa1 :', globalLog[globalLog.length - 2].targetPath, globalLog[globalLog.length - 1]._key)
  14.   user2.aa.aa2.cc1 = '屬性3的修改'
  15.   console.log('path - cc1 :', globalLog[globalLog.length - 2].targetPath, globalLog[globalLog.length - 1]._key)
  16.   console.log(globalLog)
  17. }, 2000)

然後我們看看日誌：

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

  • targetBase： 最上級的狀態
  • targetName： target 對應的屬性名稱
  • target：當前要獲取的屬性
  • _key：當前要獲取的屬性名稱
  • targetPath：從 targetBase 開始的屬性名組成的路徑

加上定位功能

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

在 set 裡面 加上 const stack = new Error() ，然後記入 targetPath 即可。

原本 set 的 log 裡沒有記錄這個 path，現在正好用上了。

定位效果

可以遍歷找到 set 的記錄，找到 targetPath 屬性然後 console.log 就可以定位了。

開發階段可以直接定位，生產模式（客戶）可以上傳日誌進行各種分析。

原始碼

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

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

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