vue3 组合API ref属性

获取DOM或者组件实例可以使用ref属性，写法和vue2需要区分开

获取单个DOM或者组件

 <!-- vue2 获取div元素 -->
    <!-- 1.通过ref属性绑定该元素 -->
    <!-- 2.通过this.$refs.box获取元素 -->
   <div ref="box">我是box</div> 

  // 1.获取单个元素
    // 1.先定义一个空的响应式数据ref定义的
    // 2.0 在setuo中返回该数据，你想获取哪个dom元素，在该元素上使用 ref属性绑定该数据即可
<div ref="boxref">我是box</div>
 const boxref = ref(null)
    onMounted(() => {
      console.log(boxref.value);

    })
  return { boxref}

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

  <!-- 2.通过this.$refs.li  获取所有遍历元素 想要获取其中一个，通过索引去取-->
    <ul>
      <li v-for="i in 4" :ket="i" ref="li">{{ 1 }}</li>
    </ul> 

 <!-- 被遍历的元素 -->
    <ul>
      <li v-for="i in 4" :key="i" :ref="setDom">第{{ i }}个I</li>
    </ul>
 // 2.0 获取v-for遍历的元素
    // 2.1 定义一个空数组，接受所有的li
    // 2.2定义一个函数,往空数组中插入push DOM
    const domList = []
    const setDom = (el) => {
      console.log(el);
      domList.push(el)
    }
    console.log(domList, 'domList');
    return { setDom }

有一个边界问题：组件更新的时候会重复的设置dom元素给数组

        解决：在组件更新前将list数组重置为空数组 （onBeforeUpdate）

<template>
  <div>
    <button @click="count++">{{ count }}</button>
    <button @click="printList">打印list</button>
    <ul>
      <li v-for="i in 4" :key="i" :ref="listPush">第{{ i }}个li</li>
    </ul>
  </div>
</template>

<script>
import { onBeforeUpdate, onMounted, ref } from 'vue'
export default {
  name: 'aPP',
  setup () {
    let list = []
    const count = ref(0)
    const listPush = (el) => {
      list.push(el)
    }
    onMounted(() => {
      console.log(list);
    })
    // ref获取v-for遍历的DOM元素,需要在组件更新的时候重置接受dom元素的数组
    onBeforeUpdate(() => {
      list = []
    })
    const printList = () => {
      console.log(list);
    }
    return { count, listPush, printList }
  }
}
</script>

<style>
</style>

总结：

         单个元素：先申明ref响应式数据，返回给模板使用，通过ref绑定数据

        遍历的元素：先定义一个空数据，定义一个函数获取该元素，返回给模板使用，通过ref绑定（当去遍历的时候，回去不断的调用这个函数，会传进来每个元素，然后push进入定义的空数组）