上一篇 juejin.cn/post/695541… 介绍了一个自己做的轻量级的状态管理，好多网友说，状态最重要的是跟踪功能，不能跟踪算啥状态管理？
因为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的功能，可以记录各级属性名称。
- targetBase： 最上级的状态
- targetName： target 对应的属性名称
- target：当前要获取的属性
- _key：当前要获取的属性名称
- targetPath：从 targetBase 开始的属性名组成的路径
加上定位功能
感谢知乎好友的帮助，增加了一个可以直接定位到修改属性的代码的功能。
在 set 里面 加上 const stack = new Error() ，然后记入 targetPath 即可。 原本 set 的 log 里没有记录这个 path，现在正好用上了。
定位效果
可以遍历找到 set 的记录，找到 targetPath 属性然后 console.log 就可以定位了。 开发阶段可以直接定位，生产模式（客户）可以上传日志进行各种分析。
源码
如果感兴趣的话，可以到这来看完整代码
