面试题:vue3获取dom的方式

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

  1. 使用 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>
  1. 使用 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.querySelectordocument.querySelectorAll 等原生方法来获取 DOM 元素。根据实际需求和场景,选择合适的方式来获取 DOM 元素。

相关推荐
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny078 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy9 小时前
css的基本知识
前端·css
昔人'9 小时前
css `lh`单位
前端·css
前端君9 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61411 小时前
Web前端面试题(2)
前端
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队12 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光12 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军12 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite