vue 3中ref获取dom

vue2中ref获取dom：

<div class="hello" ref="gantt">
   111111
</div>

 mounted() {
    console.log(this.$refs.gantt)
  }

vue3中setup函数中this指向undefined，所以需要引入 ref 。
vue3中ref获取单个dom：

<template>
  <div class="plusgantt" id='plusgantt' ref='plusgantt'>
    <div>1312</div>
  </div>
</template>

<script>
import {  onMounted, ref } from "vue";

export default {
  setup() {
    const plusgantt = ref(null); 
    onMounted(() => {
        console.log(plusgantt.value)
    });
    return {
      plusgantt,
    };
  }
};
</script>

vue3中也可以获取多个dom
vue3中ref获取多个dom：

<template>
    <div class="plusgantt" ref='plusgantt'>
        <ul>
            <li v-for="(item,index) in data" :key="index" ref='liList'>{{ item.name }}</li>
        </ul>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";

export default {
  setup() {
      const vueConfig = reactive({
        data: [
            {id: 1, name: 'list1' },
            {id: 2, name: 'list2'},
            {id: 3, name: 'list3'},
            {id: 4, name: 'list4'}
        ]
      })
      const liList = ref([]);// 存储dom列表
      onMounted(() => {
          console.log(liList.value)
      });
    return {
        ...toRefs(vueConfig),
        liList
    };
  }
};
</script>

也可以动态绑定一个方法，方法参数就是每一个li，可以push进liList 数组中。

<template>
    <div class="plusgantt" ref='plusgantt'>
        <ul>
            <li v-for="(item,index) in data" :key="index" :ref='mutiRef'>{{ item.name }}</li>
        </ul>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";

export default {
  setup() {
      const vueConfig = reactive({
        data: [
            {id: 1, name: 'list1' },
            {id: 2, name: 'list2'},
            {id: 3, name: 'list3'},
            {id: 4, name: 'list4'}
        ]
      })
      const liList = ref([]);  // 存储dom列表
      let mutiRef = (el)=> {
          liList.value.push(el)
      }
      onMounted(() => {
          console.log(liList.value)
      });
    return {
        ...toRefs(vueConfig),
        mutiRef
    };
  }
};
</script>