vue3如何在hooks中拿到列表的ref

在Vue 3中，如果你想要在使用Composition API 的 hooks 中拿到列表的 ref，你可以使用 `ref` 函数来创建一个响应式引用，并在模板或者你的函数中访问它。这里是一个简单的例子：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 创建一个响应式的引用，初始为空数组
    const items = ref([]);

    // 获取列表的 ref
    const listRef = ref(null);

    onMounted(() => {
      // 在组件挂载后可以访问 listRef 并进行操作
      console.log(listRef.value); // 这里可以获取到 DOM 元素的引用
    });

    // 你可以添加方法来修改items，例如添加、删除列表项等
    const addItem = (item) => {
      items.value.push(item);
    };

    // 返回需要的响应式数据和方法
    return {
      items,
      listRef,
      addItem
    };
  }
};

在这个例子中，`listRef` 是用来引用 DOM 元素的。你可以把它绑定到模板中的某个 DOM 元素上，如一个 `<ul>` 元素。然后在 `onMounted` 钩子中，你可以通过 `listRef.value` 来访问这个 DOM 元素。

`items` 是一个响应式数组，你可以通过 `addItem` 方法往这个数组中添加数据。`items` 数组的改变会触发界面的更新。