在 Vue 3 (Composition Api) 中正确使用动态 Refs

Question

我正在为在 Vue Composition Api 中使用动态引用而苦苦挣扎。 Vue guide 说我可以这样使用它：

<div v-for="item in list" :ref="setItemRef"></div>
import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

但我的代码在这里（缩短）：

<template>
    <section
      v-for="(item, i) of storyList"
      :ref="(el) => { if (el) { divs.push(el) } }"
    />
</template>

<script lang="ts">
[...]
export default defineComponent({
  props: {
    storyList: {
      type: Array as () => StoryList,
      required: true,
    },
  },
  setup() {
    const divs = ref([])
    
    return { divs }
  },
})
</script>

...我的 Vue 开发工具中只有这个：

data:
divs:Array[0]

$refs:
function(el) { if (el) { _vm.divs.push(el) } }:Array[4]
0:<section id="story-0" class="story-item">
1:<section id="story-1" class="story-item">
2:<section id="story-2" class="story-item">
3:<section id="story-3" class="story-item">

这是不对的，不是吗？ 我应该从divs 调用参考，而不是从$refs（什么在 vue 3 中不起作用），对吧？

Answer 1

你没有对数组的反应，所以使用这个： reactive([])