在 v-for 中绑定 ref 到模板元素和组件的简写方式

Demo1

<script setup lang="ts">javascript">
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'const refs = useTemplateRefsList<HTMLDivElement>()onUpdated(() => {console.log(refs)
})
</script><template><div v-for="i of 5" :key="i" :ref="refs.set" />
</template>

Demo2

<script setup lang="ts">javascript">
import { useTemplateRefsList } from '@vueuse/core'
import { nextTick, ref, watch } from 'vue'const count = ref(5)
const refs = useTemplateRefsList<HTMLDivElement>()watch(refs, async () => {await nextTick()console.log([...refs.value])
}, {deep: true,flush: 'post',
})
</script><template><span v-for="i of count" :key="i" :ref="refs.set" class="mr-2">{{ i }}</span><br><button @click="count += 1">Inc</button><button :disabled="count <= 0" @click="count -= 1">Dec</button><note>Open the console to see the output</note>
</template>