帮忙解读一个 vue3 的代码

Question

github 上找到个项目 https://github.com/cool-team-...，其中有一个文件的代码不太懂是什么意思，能帮忙解释下么。文件路径是：src\core\hook\core.ts，源码如下

Answer 1

这段代码是为了循环获取 dom 节点/子组件实例，用两个例子简单说明一下（舍弃掉一些无用代码）：
我们这里简单举例 dom 节点

1. 获取一个 dom 节点

<div ref="foo"></div>

const foo = ref()

// foo.value

2. 循环获取

第一种写法

<div
  v-for="(item, index) in list"
  :key="index"
  :ref="(el) => setRefs(el, index)"
>
  {{ item }}
</div>


const setRefs = (el, index) => {
  refs.value[index] = el;
};

第二种写法，也就是楼主的贴图

<div
  v-for="(item, index) in list"
  :key="index"
  :ref="setRefs(index)"
>
  {{ item }}
</div>

const setRefs = (index) => (el) => {
  refs.value[index] = el;
};

后话，至于这里为什么在 onBeforeUpdate 钩子清空一下这个数组，原因是因为组件如果有重渲染就会调用绑定在模板的方法。所以方法 setRefs 会再次被触发，为了保证 refs 存储的 dom 一致性，所以先做一下清空。

Answer 2

用 function 翻译一下 setRefs（注意：仅示意，不等价）

type SetRefFunc = (el: HTMLElement) => void;
function setRefs(index: number): SetRefFunc {
    return (el: HTMLElement) => {
        refs.value[index] = el;
    };
}

也就是说，setRefs(index) 返回的是一个函数，这个函数传入整个业务处理第 2 个参数 el，这样里面的逻辑所需要的参数就都齐了。

参考：高级函数技巧-函数柯里化