# useMergedRefs

## 使用方法

把多个对象 ref 和函数 ref 合成一个稳定的函数 ref。组件既要往外转发使用者给的 ref，又要自己挂内部 ref 时用它。如果在 `:ref` 里直接写一个内联函数，每次渲染都会造出新函数，Vue 只能先解绑再重新绑定；这里返回的始终是同一个回调，不会白折腾元素。

```ts
import { useMergedRefs } from '@astryx-vue/core'
```

把返回的函数绑给元素的 `:ref`。数组里每一项都会收到同一个值；`null` 和 `undefined` 直接跳过，所以可选的外部 ref 可以一直留在列表里。元素卸载时 Vue 会传 `null` 进来，每个目标都会被清空。

## 建议

| 指引 | 实践 |
| --- | --- |
| 推荐 | 一个元素既要收外部传进来的 ref，又要收一个或多个内部 ref 时，用 useMergedRefs。 |
| 推荐 | 在 `setup` 里调用一次，绑它返回的那个函数，这样每次渲染元素拿到的都是同一个回调。 |
| 避免 | 在 `:ref` 里直接写内联箭头函数。那样每次渲染都会换一个新回调，白白多做一轮解绑和绑定。 |

## 参数

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `refs` | `readonly MergedRef[]` | — | 最多六个目标，它们会收到同一个元素。每一项可以是 `Ref`、函数 ref、`null` 或 `undefined`；空着的位置直接跳过。必填。 |

## 返回值

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `mergedRef` | `(value: Element \| ComponentPublicInstance \| null) => void` | 合并出来的函数 ref，组件存活期间一直是同一个函数。它接收 Vue 交给模板 ref 的任何值，卸载时也会收到 `null`，然后转发给 `refs` 里的每一项。 |