1-组合API-ref属性

获取DOM或者组件实例可以使用ref属性,使用方法与vue2不同

1.获取单个DOM或者组件

vue2获取DOM元素步骤

1. 通过ref属性绑定该元素名称
2. 通过this.$refs.[name]获取元素 vue3获取DOM元素步骤
3. ref定义一个空的响应式数据，setup中返回该数据
4. 在想获取的那个dom元素上使用ref属性绑定该数据即可

<template>
  <div class="container">
    <!-- 想要获取的元素使用ref绑定数据 -->
    <div ref="dom">我是dom</div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义一个空的响应式对象
    const dom = ref(null)
    
    onMounted(()=>{
       console.log(dom.value)  // 打印一下，看看是不是dom元素
    })
    
    return { dom }
  }
}
</script>

2.获取v-for遍历的DOM或者组件

1. 定义一个空数组，用来存放dom元素
2. 定义一个函数，函数接收的参数就是DOM实例对象，接着往空数组push DOM
3. 被遍历的元素的ref属性绑定这个函数

<template>
  <div class="container">
    <ul>
      <!-- 被遍历的元素，ref属性绑定函数 -->
      <li v-for="i in 4" :key="i" :ref="setDom">第{{i}}个LI</li>
    </ul>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义一个空数组用来存放dom元素 
    const domList = []
    // 定义一个函数接收dom元素并存放到空数组中
    const setDom = (el) => {
      domList.push(el)
    }
    
    onMounted(()=>{
      console.log(domList)  // 打印一下数组，看看里面是不是dom元素
    })
    
    // 返回这个函数
    return { setDom }
  }
}
</script>

3.获取遍历元素出现的边界问题

当我们使用数组和方法存放遍历的dom元素时，v-for遍历的列表不免会进行更新，结果就会出现组件更新时会重复将dom元素push进数组的情况

• 解决方法：

// ref获取v-for遍历的DOM元素，需要在组件更新前重新将接受dom元素的数组赋值为空。
    onBeforeUpdate(()=>{
      list = []
    })

总结：

• 单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据
• 遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数
  • 获取遍历元素的坑：ref获取v-for遍历的DOM元素，需要在组件更新前重置接受dom元素的数组