Ref 控制台打印小妙招

当我们 console.log 打印 ref 变量时，看起来不太直观：

Vue 已经想到了这一点，并帮我们做了格式化，想要控制台生效需要修改下 Chrome dev tools 的设置：

点击小齿轮进设置

红框标记的 checkbox 打勾

现在再刷新页面查看 ref 打印，是不是就清晰多了：

Vue3 hook 库

VueUse

⭐️ 循环获取 ref

vue可通过 ref 来获取当前 dom，但是 vue3 有个问题，就是必须定义 ref 的变量名，才能使用

倘若有许多个ref，一个个去定义未免过于繁琐，还有就是若是dom是使用v-for循环出来的，那么ref也就不确定了，无法提前定义

解决方法

• 这是使用v-for循环出来的dom，ref通过index下标来命名

<div
 class="chart"
  v-for="(item, index) in riskSpreadItem"
  :key="item.title"
>
  <Pie
    :id="`riskSpread${index}`"
    :ref="el => getRiskSpreadRef(el, index)"
    :title="item.title"
    :data="item.data"
    emptyText="暂无风险"
  />
</div>

• 此时riskSpreadRefList里面放的就是所有ref

const riskSpreadRefList = ref<HTMLElement[]>([]);
const getRiskSpreadRef = (el, index) => {
  if (el) {
    riskSpreadRefList.value[index] = el; 
  }
};