前言

D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:

• D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。
• 它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。
• 我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。 根据广泛定义，D3可拆分为以下几种分库：

本篇文章干货较多，建议收藏！

从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup 配置项，用它来写组合式API。

onMounted()是Vue3.2中的一个生命周期钩子，用于在组件挂载后执行一些操作。

onMounted()生命周期钩子的用法和作用如下：

1. 在setup()函数中使用onMounted()生命周期钩子，可以在组件挂载后执行一些初始化操作，比如获取数据、绑定事件等。

在Vue3.2和以上版本中，onUnmounted是一个生命周期钩子函数，它会在组件实例卸载之后被调用。它的作用和onBeforeUnmount类似，主要用于在组件卸载后清理一些资源，避免内存泄漏或者不必要的计算。

下面是一个使用script setup语法的例子，展示了如何在组件卸载后清除定时器：

<script setup>
import { ref, onUnmounted } from 'vue'

const count = ref(0)
const timer = ref(null)

const startTimer = () => {
  timer.value = setInterval(() => {
    count.value++
  }, 1000)
}

const stopTimer = () => {
  clearInterval(timer.value)
}

onUnmounted(() => {
  stopTimer()
})
</script>

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="startTimer">开始计数</button>
    <button @click="stopTimer">停止计数</button>
  </div>
</template>