2025技术更新：2 可提升性能的原生API

1
<template>
2
  <img
3
    ref="imgRef"
4
    :data-src="src"
5
    :alt="alt"
6
    class="lazy-image"
7
  />
8
</template>
9

10
<script setup lang="ts">
11
import { ref, onMounted, onUnmounted } from 'vue'
12

13
const props = defineProps<{
14
  src: string // 真实图片地址
15
  alt?: string
16
}>()
17

18
const imgRef = ref<HTMLImageElement | null>(null)
19
let observer: IntersectionObserver | null = null
20

21
onMounted(() => {
22
  // 创建观察器：监听元素是否进入视口
23
  observer = new IntersectionObserver(
24
    (entries) => {
25
      entries.forEach((entry) => {
26
        if (entry.isIntersecting && imgRef.value) {
27
          // 进入视口：替换src为真实地址
28
          imgRef.value.src = imgRef.value.dataset.src || ''
29
          // 停止监听，避免重复触发
30
          observer?.unobserve(imgRef.value)
31
        }
32
      })
33
    },
34
    {
35
      rootMargin: '200px 0px', // 提前200px开始加载，优化体验
36
    }
37
  )
38

39
  // 开始监听当前图片
40
  if (imgRef.value) observer.observe(imgRef.value)
41
})
42

43
onUnmounted(() => {
44
  // 组件销毁时清理观察器，避免内存泄漏
45
  if (observer && imgRef.value) {
46
    observer.unobserve(imgRef.value)
47
    observer.disconnect()
48
  }
49
})
50
</script>
51

52
<style scoped>
53
.lazy-image {
54
  width: 100%;
55
  height: auto;
56
  background: #f0f0f0; /* 占位背景 */
57
  transition: opacity 0.3s;
58
}
59
</style>

1
<template>
2
  <div
3
    v-if="visible"
4
    ref="modalRef"
5
    class="modal"
6
  >
7
    <div class="modal-content">
8
      <!-- 内容 -->
9
    </div>
10
  </div>
11
</template>
12

13
<script setup lang="ts">
14
import { ref, onMounted } from 'vue'
15

16
const props = defineProps<{
17
  visible: boolean
18
}>()
19

20
const modalRef = ref<HTMLDivElement | null>(null)
21
let animationId: number | null = null
22

23
onMounted(() => {
24
  if (props.visible && modalRef.value) {
25
    let y = -100 // 初始位置：顶部之外
26
    const animate = () => {
27
      y += 5 // 每帧移动5px
28
      modalRef.value!.style.transform = `translateY(${y}px)`
29
      if (y < 0) {
30
        // 没到目标位置，继续下一帧
31
        animationId = requestAnimationFrame(animate)
32
      }
33
    }
34
    // 启动动画
35
    animationId = requestAnimationFrame(animate)
36
  }
37
})
38

39
// 组件销毁时，取消动画（避免内存泄漏）
40
onUnmounted(() => {
41
  if (animationId) cancelAnimationFrame(animationId)
42
})
43
</script>
44

45
<style scoped>
46
.modal {
47
  position: fixed;
48
  top: 0;
49
  left: 0;
50
  width: 100%;
51
  height: 100%;
52
  background: rgba(0, 0, 0, 0.5);
53
  display: flex;
54
  justify-content: center;
55
  align-items: flex-start;
56
  padding-top: 50px;
57
}
58

59
.modal-content {
60
  width: 80%;
61
  max-width: 500px;
62
  background: white;
63
  border-radius: 8px;
64
  padding: 20px;
65
}
66
</style>

1
<template>
2
  <div
3
    ref="containerRef"
4
    class="chart-container"
5
  >
6
    <!-- 图表容器 -->
7
  </div>
8
</template>
9

10
<script setup lang="ts">
11
import { ref, onMounted, onUnmounted } from 'vue'
12
import { Chart } from 'echarts' // 假设用ECharts
13

14
const containerRef = ref<HTMLDivElement | null>(null)
15
let chart: Chart | null = null
16
let observer: ResizeObserver | null = null
17

18
onMounted(() => {
19
  if (containerRef.value) {
20
    // 初始化图表
21
    chart = new Chart(containerRef.value)
22
    renderChart()
23

24
    // 监听容器尺寸变化
25
    observer = new ResizeObserver((entries) => {
26
      entries.forEach((entry) => {
27
        // 容器尺寸变化，重新渲染图表
28
        chart?.resize({
29
          width: entry.contentRect.width,
30
          height: entry.contentRect.height,
31
        })
32
      })
33
    })
34
    observer.observe(containerRef.value)
35
  }
36
})
37

38
const renderChart = () => {
39
  if (chart) {
40
    chart.setOption({
41
      // ECharts配置
42
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
43
      yAxis: { type: 'value' },
44
      series: [{ type: 'bar', data: [10, 20, 30] }],
45
    })
46
  }
47
}
48

49
onUnmounted(() => {
50
  // 清理资源
51
  if (observer && containerRef.value) {
52
    observer.unobserve(containerRef.value)
53
    observer.disconnect()
54
  }
55
  chart?.dispose()
56
})
57
</script>
58

59
<style scoped>
60
.chart-container {
61
  width: 100%;
62
  height: 400px;
63
}
64
</style>