vue3 自己做一个轻量级状态管理，带跟踪功能，知道是谁改的，还能定位代码。

2021-08-24 14:25 金色海洋（jyk）阅读(943) 评论(0) 编辑收藏举报

上一篇 https://www.cnblogs.com/jyk/p/14706005.html 介绍了一个自己做的轻量级的状态管理，好多网友说，状态最重要的是跟踪功能，不能跟踪算啥状态管理？

因为vue3的状态都是 reactive 的形式，也就是 proxy，原本以为有自动跟踪的功能，但是后来发现，好像没有。

不管他有没有了，我们自己加上好了。

跟踪的两种方式

不记录调用者
只记录修改了哪个属性，和属性值，还有时间，其他的不管了。这个比较简单，直接套娃即可。
全套
不知道是谁（组件）触发的状态改变，总觉得这个跟踪没啥大用处，所以还是希望要做就做全套，把调用者记录下来才是王道。
目前没啥好办法，还需要组件在使用的时候，多加一行，再设置个参数才能实现。

用 proxy 套娃 reactive，实现跟踪功能

我们先定义一个函数实现一个 proxy，加上跟踪功能。

/**
 * 带跟踪的reactive。使用 proxy 套娃
 * @param {reactive} _target  要拦截的目标 reactive
 * @param {string} flag 使用状态者的标记
 * @param {array} log 存放跟踪记录的数组
 */
export default function trackReactive (_target, flag, log) {
  const proxy = new Proxy(_target, {
    get: function (target, key, receiver) {
      log.push({
        caller: flag, // 调用者
        type: 'get', // 获取或者设置
        time: new Date().valueOf(), // 获取时间
        target: target, // 目标
        key: key, // 读取的属性名称
        value: target[key] // 读取得到的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免数组太大
      }
      // 调用原型方法
      return Reflect.get(target, key, receiver)
    },
    set: function (target, key, value, receiver) {
      log.push({
        caller: flag, // 调用者
        type: 'set', // 获取或者设置
        time: new Date().valueOf(), // 获取时间
        target: target, // 目标
        key: key, // 设置的属性名称
        value: value // 设置的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免数组太大
      }
      // 调用原型方法
      return Reflect.set(target, key, value, target)
    }
  })
  // 返回实例
  return proxy
}

比较简单的 proxy 的应用，拦截 get 和 set 操作，把需要的信息写入log。

使用方式

如果直接使用，无法记录调用者是谁，所以需要用函数的方式获取。


// 测试全局状态
const { state, track, globalLog } = nfStore.useStore()

// 直接获取，无跟踪
const user = state.userOnline
// 带跟踪的获取方式
const user2 = track.userOnline('首页测试')
// 修改测试
setTimeout(() => {
  user2.name = '测试修改。。。'
  console.log(globalLog)
}, 2000)

看看效果

我们来看看运行效果：

跟踪日志

我们可以看到确实记录了状态的变化，但是这个日志似乎有点多。我只是简单的把状态放在模板里，居然get了这么多次。

看来需要做做减法，去掉不需要的记录。

只记录关心的。


import { reactive } from 'vue'

/**
 * 带跟踪的reactive。使用 proxy 套娃
 * @param {reactive} _target  要拦截的目标 reactive
 * @param {string} flag 使用状态者的标记
 * @param {array} log 存放跟踪记录的数组
 */
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, // 调用者
              type: 'get', // 获取或者设置
              time: new Date().valueOf(), // 获取时间
              target: target, // 目标
              _key: key, // 读取的属性名称
              _value: target[key] // 读取得到的值
            })
            if (log.length > 300) {
              log.splice(0, 50) // 避免数组太大
            }
        }
      }
      // 调用原型方法
      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, // 调用者
        type: 'set', // 获取或者设置
        time: new Date().valueOf(), // 获取时间
        target: target, // 目标
        _key: key, // 设置的属性名称
        _value: value // 设置的值
      })
      if (log.length > 300) {
        log.splice(0, 50) // 避免数组太大
      }
      // 调用原型方法
      return Reflect.set(target, key, value, target)
    }
  })
  // 返回实例
  return proxy
}

加上下划线，是打印的时候自动排序好看一点。

再来看看效果

记录关系的变化

这下就清凉多了，只有三条记录，第一个是模板获取状态，然后是settimeout里面修改状态，最后是模板更新状态的显示。

target 修改了哪个状态
time 修改状态的时间戳
type 是读取还是设置
_caller 调用者的flag（需要手动设置）
_key 修改/读取的属性的名称
_value 修改/读取的属性值

基本全套了。

嵌套属性怎么办？

虽然 proxy 可以拦截操作，但是并不能拦截嵌套属性的操作。也就是说 proxy 其实是浅层的。

可能你会觉得，不对呀，reactive 明明是深层响应的，怎么就浅层了？

那是因为reactive在get里面做了“手脚”。

看上面我们写的代码，你也许会觉得奇怪，记录状态变化，为啥要拦截get？这个就是为了嵌套属性做准备。

先测试一下嵌套属性的操作

// 测试全局状态
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)

修改嵌套属性的运行效果

修改嵌套属性

只记录到一开始设置 aa 属性的操作，后面就都是 get 的操作，没有 set 的操作。
果然不支持深层操作。

再看看 reactive 内部是如何实现的。

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。这样就变成深层响应了。

改进代码支持嵌套属性的修改

我们效仿一下，在 get 里面继续套娃：

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

还是要判断一下类型，只是不用那么复杂的判断，只需要判断是不是 reactive：

是reactive，套个娃再返回。
不是 reactive，那么大概是基础类型直接返回就好。

嵌套属性的跟踪记录效果

嵌套属性的跟踪记录

现在可以记录全套了，嵌套属性也逃不掉。

能想到的都实现了，如果有啥遗漏的地方，还请大家补充。

one more thing

最后还是没有搂住，又加了一个小功能，就是修改嵌套属性的时候，如何根据日志看出来到底修改的是哪个状态。

看看上面的日志，虽然可以得到要修改的属性的名称，
但是这个属性是第几层的？上一级的属性名称是啥？能不能依次找到最上一级的属性？

各种折腾终于加上这个功能。

设计一个三层的状态，然后修改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：最上级的状态
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

刷新页面返回顶部

金色海洋工作室 ——自然框架，自然而然，快速开发、快速修改！