DOM操作は基本的なものです。
OptionsAPIで書かれている記事やドキュメントがあるのですが、compositionAPIで書かれている記事があまりなかったので、compositionAPIでDOM操作行いたいという人はこの記事で実装に生かすことができます！
結論「テンプレート参照“Ref”を使う！」
取得したいDOMにrefを付ける必要があります。
そのためにRefをvueからインポートし、使えるようにします。
ただ、ここでライフルサイクルフックを考慮する必要があります。
DOM取得はレンダリングされた後（mounted）に取るものなので、Vueファイルを読み込んだとき（created）に取ることはできません。
なので、mountedをsetup内で使うときのフック「onMounted」を使ってDOM取得をします。
今の簡単な流れをもう少し砕いてみてみましょう。
Refを使えるようにする
①Refを使うためにimportしていきます。
②DOM取得したい場所にref属性を追加します。
<template>
<div class="test" ref="testRef">test</div> //②
</template>
<script>
import { ref } from "vue"; //①
export default {
setup() {
return {
};
},
};
</script>setup関数の中の処理
① 「const testRef = ref(null); 」追加
このrefオブジェクトはcreateのときに読み込まれるものとして設定します。
②DOMを定数で定義する
refオブジェクトは１つプロパティ「value」があり、それを取ることがで、DOMを取得します。
③定数をreturnする
compositionAPIなので、setup関数内でreturnする必要があります。
④onMountedを追加する
DOM取得はレンダリングの後（mounted）に行われるため、その処理（③）をsetupに書いてしまうと、create扱いになってしまいます。mountedで処理するためには、onMountedの中に③の処理を書きましょう。
<template>
<!-- ref属性の追加 -->
<div class="test" ref="testRef">test</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const testRef = ref(null); //1
onMounted(() => { //4
const testDom = testRef.value; //2
console.log(testDom);
});
return {
testRef, //3
};
},
};
</script>それでもDOMが取れないとき
上の処理を書いたにもかかわらず、DOMが取得できないときは、DOMが更新された後に処理を行う「nextTickメソッド」というものがあります。
ここの記事が参考になったので見てみてください。
