Vue3은 DOM 요소를 얻습니다.

vue2에서는 this.$refs.xxxx를 통해 dom 요소를 얻을 수 있는데, vue3에서 통합 API를 사용하면 this가 없습니다.vue3에서 dom 요소를 얻는 방법은 다음과 같습니다.

1. js를 통해 DOM 요소 얻기
Vue는 javascript의 프레임워크일 뿐이며, 기본 js 메소드도 자연스럽게 사용할 수 있습니다.

document.querySelector(选择器)
document.getElementById(id)
document.getElementsByClassName(class)

결함: vue 프로젝트에서는 대개 컴포넌트 기반 개발로 각 컴포넌트가 상대적으로 독립적인데, js를 통해 dom 요소를 얻으면 페이지 전체의 dom 요소를 얻기 때문에 예상치 못한 요소가 나올 가능성이 있다. .

2. 심판으로 획득

<script setup>
import {
      
       ref } from 'vue';

const test = ref();   // 通过ref获取dom元素，变量名必须要和dom元素上面的名字一样
console.log(test);
</script>

<template>
	<div ref="test">测试获取dom</div>
</template>

참고: ref를 사용할 때 변수 이름은 dom 요소의 이름과 동일해야 합니다. 즉, dom 요소에 ref="xxx"라고 쓰면 변수 정의 시에도 const xxx = ref()를 사용해야 합니다.

결함: ref를 사용하여 반응형 개체를 생성할 수도 있기 때문에 이런 방식으로 dom 요소를 가져오는 것은 그다지 친숙하지 않다고 생각합니다. 이는 매우 직관적이지 않습니다(얼핏 보면 dom 요소인지 확실하지 않습니다). , 그리고 변수의 이름을 얻는 것도 제한됩니다.