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

/**
 * 带跟踪的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
}
复制代码

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

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
}
复制代码

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

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;
    };
}
复制代码

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

// 带跟踪的获取方式
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)
复制代码