面试题:vue3获取dom的方式

超维Ai编程2023-12-19 15:37

在 Vue 3 中，可以通过以下几种方式来获取 DOM 元素：

使用 ref：ref 是 Vue 3 中新增的响应式引用对象。可以通过给 DOM 元素添加 ref 属性来创建一个 ref 对象，并使用该对象来获取 DOM 元素的引用。

html 复制代码

<template>
  <div ref="myElement">Hello Vue 3</div>
</template>

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

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

    onMounted(() => {
      console.log(myElement.value); // 访问 DOM 元素
    });

    return {
      myElement
    };
  }
}
</script>

使用 document.getElementById 等原生方法：在 Vue 3 的 setup 函数中，可以直接使用 JavaScript 原生的 DOM 操作方法来获取 DOM 元素。

html 复制代码

<template>
  <div id="myElement">Hello Vue 3</div>
</template>

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

export default {
  setup() {
    onMounted(() => {
      console.log(document.getElementById('myElement')); // 获取 DOM 元素
    });
  }
}
</script>

需要注意的是，在 Vue 3 中，使用原生的 DOM 操作方法来获取 DOM 元素时，应该在 setup 函数中使用 onMounted 钩子函数，以确保 DOM 元素已经渲染完毕。

除了上述方法，还可以使用 document.querySelector、document.querySelectorAll 等原生方法来获取 DOM 元素。根据实际需求和场景，选择合适的方式来获取 DOM 元素。