一、架构设计

基于Vue3响应式原语的依赖追踪器，实时可视化组件依赖关系，性能分析精度达到毫秒级

二、核心实现

// reactiveDebugger.js
import { ref, watchEffect, onRenderTracked, onRenderTriggered } from 'vue'

const dependencyGraph = ref(new Map())

export function useReactiveDebugger(componentName) {
    const dependencies = ref(new Set())
    const updates = ref(0)
    
    const track = (target, key) => {
        const depId = `${componentName}-${target}-${key}`
        if (!dependencyGraph.value.has(depId)) {
            dependencyGraph.value.set(depId, {
                component: componentName,
                target,
                key,
                count: 0
            })
        }
        dependencies.value.add(depId)
    }
    
    watchEffect((onCleanup) => {
        onCleanup(() => {
            dependencies.value.forEach(id => {
                const dep = dependencyGraph.value.get(id)
                if (dep) dep.count--
            })
        })
        dependencies.value.forEach(id => {
            dependencyGraph.value.get(id).count++
        })
        updates.value++
    })
    
    onRenderTracked((e) => {
        track(e.target, e.key)
    })
    
    return { dependencies, updates }
}

// DebugPanel.vue
<script setup>
import { computed } from 'vue'
import { dependencyGraph } from './reactiveDebugger'

const stats = computed(() => {
    const components = new Set()
    const reactiveTargets = new Set()
    let totalDeps = 0
    
    dependencyGraph.value.forEach(dep => {
        components.add(dep.component)
        reactiveTargets.add(dep.target)
        totalDeps += dep.count
    })
    
    return {
        components: components.size,
        targets: reactiveTargets.size,
        dependencies: totalDeps
    }
})
</script>

<template>
    <div class="debug-panel">
        <h3>响应式追踪统计</h3>
        <ul>
            <li>组件: {{ stats.components }}</li>
            <li>响应式对象: {{ stats.targets }}</li>
            <li>依赖关系: {{ stats.dependencies }}</li>
        </ul>
    </div>
</template>

三、高级特性

// performance.js
export function usePerformanceTracker(componentName) {
    const renderTimes = ref([])
    let startTime
    
    onBeforeUpdate(() => {
        startTime = performance.now()
    })
    
    onUpdated(() => {
        const duration = performance.now() - startTime
        renderTimes.value.push(duration)
        if (renderTimes.value.length > 10) {
            renderTimes.value.shift()
        }
    })
    
    const avgRenderTime = computed(() => {
        if (renderTimes.value.length === 0) return 0
        return (renderTimes.value.reduce((a, b) => a + b, 0) / 
               renderTimes.value.length).toFixed(2)
    })
    
    return { avgRenderTime }
}

// DependencyGraph.vue
<script setup>
import { dependencyGraph } from './reactiveDebugger'

const graphData = computed(() => {
    const nodes = []
    const links = []
    const nodeMap = new Map()
    
    let idx = 0
    dependencyGraph.value.forEach((dep, id) => {
        if (dep.count > 0) {
            nodes.push({
                id: idx,
                name: `${dep.component}n${dep.key}`,
                group: dep.target
            })
            nodeMap.set(id, idx)
            idx++
        }
    })
    
    // 生成关联关系...
    return { nodes, links }
})
</script>

四、完整案例

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import DebugPanel from './DebugPanel.vue'
import { useReactiveDebugger } from './reactiveDebugger'

const count = ref(0)
const { dependencies } = useReactiveDebugger('App')

function increment() {
    count.value++
}
</script>

<template>
    <button @click="increment">Count: {{ count }}</button>
    <DebugPanel />
    <div v-for="id in dependencies" :key="id">
        {{ id }}
    </div>
</template>