Vue3 响应式失效 debug：Proxy 陷阱导致数据更新异常的深度排查

<template>
  <div class="dashboard">
    <div class="data-panel">
      <h3>用户统计: {{ userStats.total }}</h3>
      <p>活跃用户: {{ userStats.active }}</p>
      <p>新增用户: {{ userStats.newUsers }}</p>
    </div>
    
    <div class="chart-container">
      <canvas ref="chartCanvas"></canvas>
    </div>
    
    <button @click="refreshData">刷新数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { DataProcessor } from '@/utils/dataProcessor'

// 问题代码：响应式数据
const userStats = reactive({
  total: 0,
  active: 0,
  newUsers: 0,
  details: {}
})

const dataProcessor = new DataProcessor()

// 数据刷新函数
const refreshData = async () => {
  try {
    console.log('开始刷新数据...')
    
    // 获取原始数据
    const rawData = await fetchUserData()
    console.log('原始数据:', rawData)
    
    // 使用数据处理器处理数据（问题所在）
    const processedData = dataProcessor.process(rawData)
    console.log('处理后数据:', processedData)
    
    // 更新响应式数据
    Object.assign(userStats, processedData)
    console.log('更新后的userStats:', userStats)
    
    // 奇怪的现象：数据已更新，但视图未重新渲染
  } catch (error) {
    console.error('数据刷新失败:', error)
  }
}

// 监听数据变化
watch(userStats, (newVal, oldVal) => {
  console.log('userStats变化:', { newVal, oldVal })
  // 这个watch有时触发，有时不触发
}, { deep: true })

onMounted(() => {
  refreshData()
})
</script>

// 1. 检查数据是否真的更新了
const debugRefreshData = async () => {
  console.log('=== 开始调试数据刷新 ===')
  
  // 记录更新前的状态
  const beforeUpdate = JSON.stringify(userStats)
  console.log('更新前:', beforeUpdate)
  
  const rawData = await fetchUserData()
  const processedData = dataProcessor.process(rawData)
  
  // 记录处理后的数据
  console.log('处理后数据:', JSON.stringify(processedData))
  
  // 更新数据
  Object.assign(userStats, processedData)
  
  // 记录更新后的状态
  const afterUpdate = JSON.stringify(userStats)
  console.log('更新后:', afterUpdate)
  
  // 检查是否真的发生了变化
  console.log('数据是否变化:', beforeUpdate !== afterUpdate)
  
  // 强制触发更新（测试用）
  await nextTick()
  console.log('nextTick后的状态:', JSON.stringify(userStats))
}

// 2. 添加响应式调试代码
import { isReactive, isRef, toRaw } from 'vue'

const analyzeReactivity = () => {
  console.log('=== 响应式状态分析 ===')
  console.log('userStats是否为响应式:', isReactive(userStats))
  console.log('userStats原始对象:', toRaw(userStats))
  
  // 检查每个属性的响应式状态
  Object.keys(userStats).forEach(key => {
    const value = userStats[key]
    console.log(`${key}:`, {
      value,
      isReactive: isReactive(value),
      isRef: isRef(value),
      type: typeof value
    })
  })
}

// 在数据更新前后调用
const refreshDataWithDebug = async () => {
  analyzeReactivity() // 更新前分析
  
  await refreshData()
  
  analyzeReactivity() // 更新后分析
}

// 3. 深入分析DataProcessor
console.log('DataProcessor实例:', dataProcessor)
console.log('DataProcessor原型:', Object.getPrototypeOf(dataProcessor))

// 检查处理后的数据结构
const processedData = dataProcessor.process(rawData)
console.log('处理后数据的描述符:', Object.getOwnPropertyDescriptors(processedData))

// 关键发现：处理后的数据也是Proxy对象！
console.log('processedData是否为Proxy:', 
  processedData.constructor.name === 'Object' && 
  typeof processedData === 'object' &&
  processedData !== null
)

// DataProcessor的问题实现
class DataProcessor {
  constructor() {
    this.cache = new WeakMap()
    this.interceptors = []
  }
  
  process(data) {
    // 问题代码：创建了自定义Proxy
    return this.createProxy(data)
  }
  
  createProxy(target) {
    if (this.cache.has(target)) {
      return this.cache.get(target)
    }
    
    // 关键问题：自定义Proxy实现
    const proxy = new Proxy(target, {
      get(obj, prop) {
        console.log(`DataProcessor访问属性: ${prop}`)
        
        // 问题1：拦截了所有属性访问
        const value = obj[prop]
        
        // 问题2：对嵌套对象也创建Proxy
        if (typeof value === 'object' && value !== null) {
          return this.createProxy(value)
        }
        
        return value
      },
      
      set(obj, prop, value) {
        console.log(`DataProcessor设置属性: ${prop} = ${value}`)
        
        // 问题3：没有正确处理Vue3的响应式标记
        obj[prop] = value
        
        // 问题4：自定义的变更通知机制
        this.notifyChange(obj, prop, value)
        
        return true
      }
    })
    
    this.cache.set(target, proxy)
    return proxy
  }
  
  notifyChange(obj, prop, value) {
    // 自定义的变更通知，与Vue3冲突
    this.interceptors.forEach(interceptor => {
      interceptor(obj, prop, value)
    })
  }
}

// Vue3响应式系统简化版本（用于理解）
const reactiveMap = new WeakMap()
const readonlyMap = new WeakMap()

function reactive(target) {
  // Vue3会检查对象是否已经是响应式的
  if (target && target.__v_isReactive) {
    return target
  }
  
  // 检查是否已经有对应的响应式对象
  const existingProxy = reactiveMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  
  // 创建响应式Proxy
  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      // Vue3的依赖收集
      track(target, 'get', key)
      
      const result = Reflect.get(target, key, receiver)
      
      // 嵌套对象的响应式处理
      if (isObject(result)) {
        return reactive(result)
      }
      
      return result
    },
    
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // Vue3的变更通知
      if (value !== oldValue) {
        trigger(target, 'set', key, value, oldValue)
      }
      
      return result
    }
  })
  
  // 标记为响应式对象
  proxy.__v_isReactive = true
  reactiveMap.set(target, proxy)
  
  return proxy
}

// 冲突分析代码
const analyzeProxyConflict = () => {
  console.log('=== Proxy冲突分析 ===')
  
  // 创建测试数据
  const originalData = { count: 1, nested: { value: 2 } }
  
  // Vue3响应式处理
  const vueReactive = reactive(originalData)
  console.log('Vue响应式对象:', vueReactive)
  console.log('Vue响应式标记:', vueReactive.__v_isReactive)
  
  // DataProcessor处理
  const dpProcessed = dataProcessor.process(originalData)
  console.log('DP处理后对象:', dpProcessed)
  
  // 检查Proxy嵌套情况
  console.log('=== Proxy嵌套检查 ===')
  console.log('vueReactive是否为Proxy:', isProxy(vueReactive))
  console.log('dpProcessed是否为Proxy:', isProxy(dpProcessed))
  
  // 模拟Object.assign操作
  console.log('=== 模拟冲突场景 ===')
  const testReactive = reactive({ count: 0 })
  
  console.log('更新前:', testReactive.count)
  
  // 这里会发生冲突
  Object.assign(testReactive, dpProcessed)
  
  console.log('更新后:', testReactive.count)
  console.log('响应式是否仍然有效:', isReactive(testReactive))
}

// 辅助函数：检查是否为Proxy
function isProxy(obj) {
  return obj && typeof obj === 'object' && obj.constructor === Object
}

// 解决方案1：创建数据去代理工具
class ProxyUtils {
  /**
   * 深度去除Proxy包装，返回原始对象
   * @param {any} obj - 可能包含Proxy的对象
   * @returns {any} 原始对象
   */
  static deepUnwrap(obj) {
    if (obj === null || typeof obj !== 'object') {
      return obj
    }
    
    // 检查是否为Vue3响应式对象，如果是则保持不变
    if (obj.__v_isReactive || obj.__v_isReadonly) {
      return obj
    }
    
    // 尝试获取原始对象
    let unwrapped = obj
    
    // 如果是Proxy，尝试获取原始target
    if (this.isCustomProxy(obj)) {
      unwrapped = this.getProxyTarget(obj)
    }
    
    // 递归处理嵌套对象
    if (Array.isArray(unwrapped)) {
      return unwrapped.map(item => this.deepUnwrap(item))
    }
    
    if (unwrapped && typeof unwrapped === 'object') {
      const result = {}
      for (const [key, value] of Object.entries(unwrapped)) {
        result[key] = this.deepUnwrap(value)
      }
      return result
    }
    
    return unwrapped
  }
  
  /**
   * 检查是否为自定义Proxy（非Vue3响应式）
   */
  static isCustomProxy(obj) {
    return obj && 
           typeof obj === 'object' && 
           !obj.__v_isReactive && 
           !obj.__v_isReadonly &&
           obj.constructor === Object &&
           this.hasProxyBehavior(obj)
  }
  
  /**
   * 检查对象是否具有Proxy行为
   */
  static hasProxyBehavior(obj) {
    try {
      // 通过检查属性描述符来判断
      const descriptor = Object.getOwnPropertyDescriptor(obj, 'constructor')
      return !descriptor || descriptor.configurable === false
    } catch {
      return true // 如果检查失败，假设是Proxy
    }
  }
  
  /**
   * 获取Proxy的原始target
   */
  static getProxyTarget(proxy) {
    // 这是一个hack方法，在实际项目中需要更robust的实现
    try {
      return JSON.parse(JSON.stringify(proxy))
    } catch {
      return proxy
    }
  }
}

// 修改后的数据刷新函数
const refreshDataFixed = async () => {
  try {
    console.log('开始刷新数据（修复版）...')
    
    const rawData = await fetchUserData()
    const processedData = dataProcessor.process(rawData)
    
    // 关键修复：去除Proxy包装
    const cleanData = ProxyUtils.deepUnwrap(processedData)
    console.log('清理后的数据:', cleanData)
    
    // 现在可以安全地更新响应式数据
    Object.assign(userStats, cleanData)
    
    console.log('数据更新完成，响应式状态:', isReactive(userStats))
  } catch (error) {
    console.error('数据刷新失败:', error)
  }
}

// 解决方案2：重构DataProcessor以兼容Vue3
class Vue3CompatibleDataProcessor {
  constructor() {
    this.cache = new WeakMap()
    this.interceptors = []
  }
  
  process(data) {
    // 不再创建Proxy，直接处理数据
    return this.processData(data)
  }
  
  processData(data) {
    if (data === null || typeof data !== 'object') {
      return data
    }
    
    // 检查缓存
    if (this.cache.has(data)) {
      return this.cache.get(data)
    }
    
    let result
    
    if (Array.isArray(data)) {
      result = data.map(item => this.processData(item))
    } else {
      result = {}
      for (const [key, value] of Object.entries(data)) {
        result[key] = this.processData(value)
      }
    }
    
    // 应用数据处理逻辑（不使用Proxy）
    this.applyProcessingRules(result)
    
    this.cache.set(data, result)
    return result
  }
  
  applyProcessingRules(data) {
    // 数据处理逻辑，不涉及Proxy
    if (data && typeof data === 'object') {
      // 添加计算属性
      if (data.total !== undefined && data.active !== undefined) {
        data.inactiveRate = ((data.total - data.active) / data.total * 100).toFixed(2)
      }
      
      // 数据格式化
      if (data.timestamp) {
        data.formattedTime = new Date(data.timestamp).toLocaleString()
      }
    }
  }
  
  // 提供观察者模式，但不干扰Vue3响应式
  addInterceptor(callback) {
    this.interceptors.push(callback)
  }
  
  removeInterceptor(callback) {
    const index = this.interceptors.indexOf(callback)
    if (index > -1) {
      this.interceptors.splice(index, 1)
    }
  }
}

// 使用重构后的处理器
const compatibleDataProcessor = new Vue3CompatibleDataProcessor()

const refreshDataWithCompatibleProcessor = async () => {
  try {
    const rawData = await fetchUserData()
    
    // 使用兼容的处理器
    const processedData = compatibleDataProcessor.process(rawData)
    
    // 直接更新，无需额外处理
    Object.assign(userStats, processedData)
    
    console.log('数据更新成功，响应式正常工作')
  } catch (error) {
    console.error('数据刷新失败:', error)
  }
}

// 解决方案3：建立响应式状态监控系统
class ReactivityMonitor {
  constructor() {
    this.watchers = new Map()
    this.debugMode = process.env.NODE_ENV === 'development'
  }
  
  /**
   * 监控响应式对象的状态
   */
  monitor(obj, name = 'unknown') {
    if (!isReactive(obj)) {
      console.warn(`对象 ${name} 不是响应式的`)
      return
    }
    
    const watcher = watch(
      () => obj,
      (newVal, oldVal) => {
        if (this.debugMode) {
          console.log(`[ReactivityMonitor] ${name} 发生变化:`, {
            newVal: JSON.stringify(newVal),
            oldVal: JSON.stringify(oldVal),
            timestamp: new Date().toISOString()
          })
        }
        
        // 检查响应式状态是否仍然有效
        this.validateReactivity(obj, name)
      },
      { deep: true, immediate: false }
    )
    
    this.watchers.set(name, watcher)
    
    if (this.debugMode) {
      console.log(`[ReactivityMonitor] 开始监控 ${name}`)
    }
  }
  
  /**
   * 验证对象的响应式状态
   */
  validateReactivity(obj, name) {
    const isStillReactive = isReactive(obj)
    
    if (!isStillReactive) {
      console.error(`[ReactivityMonitor] 警告: ${name} 失去了响应式特性!`)
      
      // 尝试恢复响应式（如果可能）
      this.attemptReactivityRecovery(obj, name)
    }
  }
  
  /**
   * 尝试恢复响应式状态
   */
  attemptReactivityRecovery(obj, name) {
    console.log(`[ReactivityMonitor] 尝试恢复 ${name} 的响应式状态`)
    
    // 这里可以实现自动恢复逻辑
    // 例如：重新创建响应式对象，或者通知开发者
    
    if (this.debugMode) {
      console.trace(`响应式失效堆栈追踪 - ${name}`)
    }
  }
  
  /**
   * 停止监控
   */
  stopMonitoring(name) {
    const watcher = this.watchers.get(name)
    if (watcher) {
      watcher() // 调用返回的停止函数
      this.watchers.delete(name)
      
      if (this.debugMode) {
        console.log(`[ReactivityMonitor] 停止监控 ${name}`)
      }
    }
  }
  
  /**
   * 获取监控报告
   */
  getReport() {
    return {
      activeWatchers: Array.from(this.watchers.keys()),
      totalWatchers: this.watchers.size,
      timestamp: new Date().toISOString()
    }
  }
}

// 使用监控系统
const reactivityMonitor = new ReactivityMonitor()

// 在组件中使用
onMounted(() => {
  // 开始监控关键的响应式对象
  reactivityMonitor.monitor(userStats, 'userStats')
})

onUnmounted(() => {
  // 清理监控
  reactivityMonitor.stopMonitoring('userStats')
})

// 测试用例：验证响应式修复效果
describe('Vue3响应式修复测试', () => {
  let testComponent
  let reactivityMonitor
  
  beforeEach(() => {
    testComponent = createTestComponent()
    reactivityMonitor = new ReactivityMonitor()
  })
  
  afterEach(() => {
    reactivityMonitor.stopMonitoring('testData')
  })
  
  test('数据更新后视图应该正确刷新', async () => {
    const { userStats, refreshData } = testComponent
    
    // 监控响应式状态
    reactivityMonitor.monitor(userStats, 'testData')
    
    // 记录初始值
    const initialTotal = userStats.total
    
    // 执行数据刷新
    await refreshData()
    
    // 等待DOM更新
    await nextTick()
    
    // 验证数据已更新
    expect(userStats.total).not.toBe(initialTotal)
    
    // 验证响应式状态仍然有效
    expect(isReactive(userStats)).toBe(true)
  })
  
  test('深度嵌套对象的响应式应该保持有效', async () => {
    const { userStats, refreshData } = testComponent
    
    // 添加嵌套数据
    userStats.nested = reactive({
      deep: { value: 1 }
    })
    
    await refreshData()
    
    // 验证嵌套对象仍然是响应式的
    expect(isReactive(userStats.nested)).toBe(true)
    expect(isReactive(userStats.nested.deep)).toBe(true)
  })
  
  test('Proxy去包装工具应该正确处理复杂数据结构', () => {
    const complexData = {
      array: [1, 2, { nested: true }],
      object: { a: 1, b: { c: 2 } },
      primitive: 'string'
    }
    
    // 模拟DataProcessor处理
    const processedData = dataProcessor.process(complexData)
    
    // 去包装处理
    const unwrapped = ProxyUtils.deepUnwrap(processedData)
    
    // 验证结构完整性
    expect(unwrapped).toEqual(complexData)
    expect(Array.isArray(unwrapped.array)).toBe(true)
    expect(typeof unwrapped.object).toBe('object')
  })
})

// 性能测试
describe('性能对比测试', () => {
  const testDataSize = 1000
  const testData = generateLargeTestData(testDataSize)
  
  test('原始方案 vs 优化方案性能对比', async () => {
    console.time('原始方案')
    for (let i = 0; i < 100; i++) {
      const processed = dataProcessor.process(testData)
      Object.assign(reactive({}), processed)
    }
    console.timeEnd('原始方案')
    
    console.time('优化方案')
    for (let i = 0; i < 100; i++) {
      const processed = compatibleDataProcessor.process(testData)
      Object.assign(reactive({}), processed)
    }
    console.timeEnd('优化方案')
  })
})

function generateLargeTestData(size) {
  return Array.from({ length: size }, (_, i) => ({
    id: i,
    name: `User ${i}`,
    data: {
      score: Math.random() * 100,
      active: Math.random() > 0.5,
      metadata: {
        created: new Date().toISOString(),
        tags: [`tag${i}`, `category${i % 10}`]
      }
    }
  }))
}

// 性能基准测试工具
class PerformanceBenchmark {
  constructor() {
    this.results = []
  }
  
  async benchmark(name, fn, iterations = 100) {
    console.log(`开始基准测试: ${name}`)
    
    const times = []
    
    for (let i = 0; i < iterations; i++) {
      const start = performance.now()
      await fn()
      const end = performance.now()
      times.push(end - start)
    }
    
    const result = {
      name,
      iterations,
      totalTime: times.reduce((a, b) => a + b, 0),
      averageTime: times.reduce((a, b) => a + b, 0) / times.length,
      minTime: Math.min(...times),
      maxTime: Math.max(...times),
      medianTime: this.calculateMedian(times)
    }
    
    this.results.push(result)
    console.log(`${name} 基准测试完成:`, result)
    
    return result
  }
  
  calculateMedian(arr) {
    const sorted = [...arr].sort((a, b) => a - b)
    const mid = Math.floor(sorted.length / 2)
    return sorted.length % 2 !== 0 
      ? sorted[mid] 
      : (sorted[mid - 1] + sorted[mid]) / 2
  }
  
  generateReport() {
    console.table(this.results)
    return this.results
  }
}

// 执行性能测试
const runPerformanceTests = async () => {
  const benchmark = new PerformanceBenchmark()
  
  // 测试原始方案
  await benchmark.benchmark('原始DataProcessor', async () => {
    const data = await fetchUserData()
    const processed = dataProcessor.process(data)
    Object.assign(reactive({}), processed)
  })
  
  // 测试优化方案
  await benchmark.benchmark('优化DataProcessor', async () => {
    const data = await fetchUserData()
    const processed = compatibleDataProcessor.process(data)
    Object.assign(reactive({}), processed)
  })
  
  // 测试去Proxy方案
  await benchmark.benchmark('去Proxy方案', async () => {
    const data = await fetchUserData()
    const processed = dataProcessor.process(data)
    const cleaned = ProxyUtils.deepUnwrap(processed)
    Object.assign(reactive({}), cleaned)
  })
  
  benchmark.generateReport()
}

// Vue3响应式调试工具集
class Vue3ReactivityDebugger {
  constructor() {
    this.trackingEnabled = true
    this.logs = []
    this.maxLogs = 1000
  }
  
  /**
   * 启用响应式追踪调试
   */
  enableTracking() {
    if (typeof window !== 'undefined' && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
      // 集成Vue DevTools
      this.setupDevToolsIntegration()
    }
    
    // 拦截Vue3的track和trigger函数
    this.interceptReactivitySystem()
  }
  
  /**
   * 拦截Vue3响应式系统
   */
  interceptReactivitySystem() {
    // 这需要在开发环境中使用，生产环境应该禁用
    if (process.env.NODE_ENV !== 'development') return
    
    const originalConsole = console.log
    
    // 创建自定义的track函数
    window.__VUE_REACTIVITY_DEBUG__ = {
      track: (target, type, key) => {
        this.logReactivityEvent('TRACK', { target, type, key })
      },
      trigger: (target, type, key, newValue, oldValue) => {
        this.logReactivityEvent('TRIGGER', { target, type, key, newValue, oldValue })
      }
    }
  }
  
  /**
   * 记录响应式事件
   */
  logReactivityEvent(type, details) {
    if (!this.trackingEnabled) return
    
    const event = {
      type,
      details,
      timestamp: Date.now(),
      stack: new Error().stack
    }
    
    this.logs.push(event)
    
    // 保持日志数量在限制内
    if (this.logs.length > this.maxLogs) {
      this.logs.shift()
    }
    
    // 实时输出重要事件
    if (type === 'TRIGGER') {
      console.log(`[Vue3 Reactivity] ${type}:`, details)
    }
  }
  
  /**
   * 分析响应式对象
   */
  analyzeReactiveObject(obj, name = 'unknown') {
    const analysis = {
      name,
      isReactive: isReactive(obj),
      isReadonly: isReadonly(obj),
      isProxy: this.isProxy(obj),
      properties: {},
      timestamp: new Date().toISOString()
    }
    
    if (obj && typeof obj === 'object') {
      for (const [key, value] of Object.entries(obj)) {
        analysis.properties[key] = {
          type: typeof value,
          isReactive: isReactive(value),
          isReadonly: isReadonly(value),
          value: this.serializeValue(value)
        }
      }
    }
    
    console.log(`[Reactivity Analysis] ${name}:`, analysis)
    return analysis
  }
  
  /**
   * 检查Proxy冲突
   */
  detectProxyConflicts(obj) {
    const conflicts = []
    
    if (this.isProxy(obj) && !isReactive(obj)) {
      conflicts.push({
        type: 'NON_VUE_PROXY',
        message: '检测到非Vue3的Proxy对象',
        object: obj
      })
    }
    
    if (obj && typeof obj === 'object') {
      for (const [key, value] of Object.entries(obj)) {
        if (this.isProxy(value) && !isReactive(value)) {
          conflicts.push({
            type: 'NESTED_NON_VUE_PROXY',
            message: `属性 ${key} 包含非Vue3的Proxy对象`,
            key,
            value
          })
        }
      }
    }
    
    if (conflicts.length > 0) {
      console.warn('[Proxy Conflict Detection] 发现冲突:', conflicts)
    }
    
    return conflicts
  }
  
  /**
   * 生成调试报告
   */
  generateDebugReport() {
    const report = {
      summary: {
        totalEvents: this.logs.length,
        trackEvents: this.logs.filter(log => log.type === 'TRACK').length,
        triggerEvents: this.logs.filter(log => log.type === 'TRIGGER').length
      },
      recentEvents: this.logs.slice(-20),
      timestamp: new Date().toISOString()
    }
    
    console.log('[Vue3 Reactivity Debug Report]', report)
    return report
  }
  
  // 辅助方法
  isProxy(obj) {
    return obj && typeof obj === 'object' && obj.constructor === Object
  }
  
  serializeValue(value) {
    try {
      return JSON.stringify(value)
    } catch {
      return '[Circular or Non-serializable]'
    }
  }
}

// 全局调试器实例
const reactivityDebugger = new Vue3ReactivityDebugger()

// 在开发环境中启用
if (process.env.NODE_ENV === 'development') {
  reactivityDebugger.enableTracking()
  
  // 暴露到全局，方便控制台调试
  window.__VUE3_REACTIVITY_DEBUGGER__ = reactivityDebugger
}

// 自动化响应式测试工具
class ReactivityTestSuite {
  constructor() {
    this.tests = []
    this.results = []
  }
  
  /**
   * 添加测试用例
   */
  addTest(name, testFn) {
    this.tests.push({ name, testFn })
  }
  
  /**
   * 运行所有测试
   */
  async runAllTests() {
    console.log('开始运行响应式测试套件...')
    
    for (const test of this.tests) {
      try {
        console.log(`运行测试: ${test.name}`)
        
        const startTime = performance.now()
        await test.testFn()
        const endTime = performance.now()
        
        this.results.push({
          name: test.name,
          status: 'PASSED',
          duration: endTime - startTime
        })
        
        console.log(`✅ ${test.name} - 通过`)
      } catch (error) {
        this.results.push({
          name: test.name,
          status: 'FAILED',
          error: error.message,
          stack: error.stack
        })
        
        console.error(`❌ ${test.name} - 失败:`, error.message)
      }
    }
    
    this.generateTestReport()
  }
  
  /**
   * 生成测试报告
   */
  generateTestReport() {
    const passed = this.results.filter(r => r.status === 'PASSED').length
    const failed = this.results.filter(r => r.status === 'FAILED').length
    
    console.log('\n=== 响应式测试报告 ===')
    console.log(`总测试数: ${this.results.length}`)
    console.log(`通过: ${passed}`)
    console.log(`失败: ${failed}`)
    console.log(`成功率: ${(passed / this.results.length * 100).toFixed(2)}%`)
    
    if (failed > 0) {
      console.log('\n失败的测试:')
      this.results
        .filter(r => r.status === 'FAILED')
        .forEach(r => console.log(`- ${r.name}: ${r.error}`))
    }
  }
}

// 创建测试套件
const testSuite = new ReactivityTestSuite()

// 添加基础响应式测试
testSuite.addTest('基础响应式功能', async () => {
  const data = reactive({ count: 0 })
  let triggered = false
  
  watch(data, () => { triggered = true })
  
  data.count = 1
  await nextTick()
  
  if (!triggered) {
    throw new Error('响应式更新未触发')
  }
})

// 添加Proxy冲突测试
testSuite.addTest('Proxy冲突检测', async () => {
  const originalData = { value: 1 }
  const processedData = dataProcessor.process(originalData)
  const reactiveData = reactive({})
  
  // 检测冲突
  const conflicts = reactivityDebugger.detectProxyConflicts(processedData)
  
  if (conflicts.length === 0) {
    throw new Error('应该检测到Proxy冲突')
  }
})

// 添加数据更新测试
testSuite.addTest('数据更新完整性', async () => {
  const testData = reactive({
    user: { name: 'test', age: 25 },
    stats: { count: 0, active: true }
  })
  
  const newData = {
    user: { name: 'updated', age: 26 },
    stats: { count: 10, active: false }
  }
  
  Object.assign(testData, newData)
  
  if (testData.user.name !== 'updated' || testData.stats.count !== 10) {
    throw new Error('数据更新不完整')
  }
  
  if (!isReactive(testData)) {
    throw new Error('更新后失去响应式特性')
  }
})

// ❌ 危险做法：直接使用可能包含Proxy的第三方库数据
const updateDataDirectly = (thirdPartyData) => {
  Object.assign(reactiveState, thirdPartyData) // 可能导致响应式失效
}

// ✅ 安全做法：先检查和清理数据
const updateDataSafely = (thirdPartyData) => {
  const cleanData = ProxyUtils.deepUnwrap(thirdPartyData)
  Object.assign(reactiveState, cleanData)
}

// ❌ 错误：直接设置Proxy对象为属性
reactiveState.complexData = someProxyObject

// ✅ 正确：确保设置的是普通对象
reactiveState.complexData = toRaw(someProxyObject) || ProxyUtils.deepUnwrap(someProxyObject)

// ❌ 危险：假设嵌套对象自动具有响应式
const processNestedData = (data) => {
  data.nested.value = newValue // 可能不会触发更新
}

// ✅ 安全：显式检查和处理嵌套响应式
const processNestedDataSafely = (data) => {
  if (!isReactive(data.nested)) {
    data.nested = reactive(data.nested)
  }
  data.nested.value = newValue
}

// 性能优化最佳实践
class ReactivityPerformanceOptimizer {
  /**
   * 批量更新优化
   */
  static batchUpdate(updates) {
    return nextTick(() => {
      updates.forEach(update => update())
    })
  }
  
  /**
   * 大数据集响应式优化
   */
  static optimizeLargeDataset(data) {
    // 对于大数据集，只对必要的部分创建响应式
    return {
      // 响应式的汇总数据
      summary: reactive(this.calculateSummary(data)),
      
      // 非响应式的详细数据
      details: markRaw(data),
      
      // 按需响应式化的方法
      makeItemReactive(index) {
        if (!isReactive(this.details[index])) {
          this.details[index] = reactive(this.details[index])
        }
        return this.details[index]
      }
    }
  }
  
  /**
   * 条件响应式
   */
  static conditionalReactive(data, condition) {
    return condition ? reactive(data) : markRaw(data)
  }
  
  static calculateSummary(data) {
    return {
      total: data.length,
      lastUpdated: new Date().toISOString()
    }
  }
}