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

上一篇 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)

看看效果

我们来看看运行效果:

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

我们可以看到确实记录了状态的变化,但是这个日志似乎有点多。我只是简单的把状态放在模板里,居然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
}

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

再来看看效果

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

这下就清凉多了,只有三条记录,第一个是模板获取状态,然后是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)

修改嵌套属性的运行效果

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

只记录到一开始设置 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,那么大概是基础类型直接返回就好。

嵌套属性的跟踪记录效果

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

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

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

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)

然后我们看看日志:

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

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

跟踪记录里面增加了一个path的功能,可以记录各级属性名称。

  • targetBase: 最上级的状态
  • targetName: target 对应的属性名称
  • target:当前要获取的属性
  • _key:当前要获取的属性名称
  • targetPath:从 targetBase 开始的属性名组成的路径

加上定位功能

感谢知乎好友的帮助,增加了一个可以直接定位到修改属性的代码的功能。

在 set 里面 加上 const stack = new Error() ,然后记入 targetPath 即可。
原本 set 的 log 里没有记录这个 path,现在正好用上了。

定位效果

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

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

可以遍历找到 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

上一篇:vue3获取数据的注意点


下一篇:WebFlux使用ServerHttpRequest出现找不到构造