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 要素であるかどうかわかりません)。 、変数の名前の取得も制限されます。