vue3中 ref 获取 dom 元素

在 vue3 中使用 ref 可以获取 单个 dom 元素，也可以获取遍历的 dom 元素，。。。。。

    // 使用 ref 获取单个 dom 元素
    // 生明的常量要和 dom 元素上生明的 ref 一致
    // 在 setup 中返回 需要回去的元素
    
    
    // 获取被遍历的元素
    // 2.1 定义一个空数组，接收所有的LI
    // 2.2 定义一个函数，往空数组push DOM

<template>
  <div class="app-container">
    <h1>APP 根组件</h1>
    <!-- 使用 ref 获取dom 元素 -->
    <div ref="dom">我是 DOM 元素</div>

    <ul>
      <!-- 动态绑定 ref 值 -->
      <li v-for="i in 4" :key="i" :ref="setDom">第-{{i}}-li</li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, onUnmounted } from 'vue'
export default {
  name: 'App',

  setup() {
    // 使用 ref 获取单个 dom 元素
    // 生明的常量要和 dom 元素上生明的 ref 一致
    // 在 setup 中返回 需要回去的元素
    const dom = ref(null)

    onMounted(() => {
      console.log(dom.value)
    })

    // 获取被遍历的元素
    // 2.1 定义一个空数组，接收所有的LI
    // 2.2 定义一个函数，往空数组push DOM

    const domList = []
    const setDom = el => {
      domList.push(el)
    }
    onMounted(() => {
      console.log(domList)
    })

    return { dom, setDom }
  }
}
</script>

<style>
</style>