前言
附上vue3.0文档：Vue3中文文档 - vuejs
2022.10.22 更新
鉴于较多人询问几个高频问题，在此做统一回复
-
ref.value获取到的是null
答：检查是否将ref变量return出去了
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null -
ref.value获取到的数据怎么使用
答：在函数、生命周期里，例: myRef.value.className -
获取多个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()可以显示一个对象所有的属性和方法
效果图：
如果本篇文章对你有帮助的话，很高兴能够帮助上你。
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。
