vue 3.0 使用ref获取dom元素

前言

附上vue3.0文档：Vue3中文文档 - vuejs

2022.10.22 更新

鉴于较多人询问几个高频问题，在此做统一回复

1. ref.value获取到的是null
   答：检查是否将ref变量return出去了
   答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null

2. ref.value获取到的数据怎么使用
   答：在函数、生命周期里，例: myRef.value.className

3. 获取多个dom，push重复数据
   答：检查setup函数执行了几次

最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果

Vue 2.x获取DOM

<div ref="myRef"></div>

this.$refs.myRef

Vue 3.0获取单个DOM

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

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

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });
 
    return {
      myRef
    };
  }
};
</script>

Vue 3.0获取多个DOM(一般用于获取数组)

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value);
    });

    return {
      arr,
      setRef
    };
  }
};
</script>

注：console.dir()可以显示一个对象所有的属性和方法

效果图：

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。