导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

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; 
  }
};

• 使用：循环去取就行了，item就是通过ref拿到的dom元素。可以操作上面定义的变量或方法

使用 vite 2.0 动态引入加载图片 :src，解决方法超级简单

<img :src="getImageUrl(name)" alt="" />

function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
}