一、Vue3响应式系统核心

二、仪表盘核心实现

1. 实时数据连接

import { ref, onMounted, onUnmounted } from 'vue'
import { connectWebSocket } from '@/api/websocket'

export function useRealtimeData() {
    const metrics = reactive({
        cpu: 0,
        memory: 0,
        networkIn: 0,
        networkOut: 0
    })

    let socket = null
    
    onMounted(async () => {
        socket = await connectWebSocket()
        socket.on('update', (data) => {
            Object.assign(metrics, data)
        })
    })
    
    onUnmounted(() => {
        socket?.close()
    })
    
    return { metrics }
}

2. 性能优化组件

<template>
  <div class="gauge-container">
    <svg :width="size" :height="size">
      <path 
        :d="arcPath"
        fill="none"
        :stroke="strokeColor"
        stroke-width="12"
      />
      <text 
        x="50%" 
        y="50%"
        text-anchor="middle"
        dominant-baseline="middle"
        class="gauge-value"
      >
        {{ formattedValue }}
      </text>
    </svg>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    value: { type: Number, required: true },
    max: { type: Number, default: 100 }
})

const size = 120
const strokeColor = computed(() => 
    props.value > 80 ? '#ff4757' : 
    props.value > 60 ? '#ffa502' : '#2ed573'
)

const arcPath = computed(() => {
    const radius = size / 2 - 10
    const angle = (props.value / props.max) * Math.PI
    return `
        M ${size/2} ${size/2 - radius}
        A ${radius} ${radius} 0 
        ${props.value > 50 ? 1 : 0} 1
        ${size/2 + radius * Math.sin(angle)} 
        ${size/2 - radius * Math.cos(angle)}
    `
})
</script>

3. 动态图表渲染

class RealtimeChart {
    constructor(canvas, duration = 60000) {
        this.ctx = canvas.getContext('2d')
        this.data = []
        this.duration = duration
    }
    
    addPoint(value) {
        const now = Date.now()
        this.data.push({ time: now, value })
        this.cleanOldData(now)
        this.draw()
    }
    
    cleanOldData(now) {
        this.data = this.data.filter(
            d => now - d.time  d.value)) || 1
        const width = this.ctx.canvas.width
        const height = this.ctx.canvas.height
        
        this.data.forEach((d, i) => {
            const x = (i / this.data.length) * width
            const y = height - (d.value / max) * height
            
            if (i === 0) {
                this.ctx.beginPath()
                this.ctx.moveTo(x, y)
            } else {
                this.ctx.lineTo(x, y)
            }
        })
        
        this.ctx.stroke()
    }
}

三、高级功能实现

1. 数据采样策略

function useSampledData(rawData, interval = 1000) {
    const sampled = ref([])
    let lastTimestamp = 0
    
    watch(rawData, (newData) => {
        const now = Date.now()
        if (now - lastTimestamp >= interval) {
            sampled.value = [
                ...sampled.value.slice(-59),
                { time: now, value: newData }
            ]
            lastTimestamp = now
        }
    }, { immediate: true })
    
    return sampled
}

2. 自适应渲染控制

function useRenderThrottle(componentRef, fps = 30) {
    const frameInterval = 1000 / fps
    let lastRenderTime = 0
    
    const requestRender = () => {
        const now = performance.now()
        if (now - lastRenderTime >= frameInterval) {
            componentRef.value?.update()
            lastRenderTime = now
        }
        requestAnimationFrame(requestRender)
    }
    
    onMounted(() => {
        requestRender()
    })
}

四、性能优化成果