Vue前端踩坑日常(一)之DOM元素

传统获取DOM元素的方法

相信大家获取DOM元素都不陌生。都是从html一路披荆斩棘到了Vue3的。还是重新回顾一下在JS中获取DOM元素的方法吧。

html 复制代码
<div class="body" id="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <p>我是测试文字</p>
</div>
js 复制代码
let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

代码执行结果 在HTML中,我们获取元素的方法就是通过getElementsByClassName或者是getElementById通过元素的类名或者是ID来对元素进行锁定的。

在Vue中获取DOM元素

直接在setup中获取

因为Vue中有生命周期的缘故,获取元素不能再setup中直接获取到DOM元素。DOM元素需要经过渲染,挂载到页面中才能获取到。当初第一次接触到Vue的时候,还沉浸在HTML的操作,直接在setup中操作DOM元素,结果给我迎头一棒。

相同的代码,但是在Vue中运行,直接就是null。我们仔细看获取的HTMLCollection,明明可以获取得到,那我们再来看看,打印这个数组的长度。

js 复制代码
let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

console.log("btn的长度"+btn.length); 

神奇的事情出现了,数组的长度居然是0。后面我去查阅资料发现,我们只是能获取到这个DOM元素,但是没有办法进行操作。因为在created中,实例被生成的时候哦根本就没有这个元素被挂在上去。知道了原因之后,我又开开心心地把获取这个两个DOM元素的操作放到了onMounted钩子函数中,这样总没错了吧。

在onMounted钩子函数中获取

在onMounted的钩子函数中获取

Vue 复制代码
onMounted(()=>{
  let btn = document.getElementsByClassName("btn")
  console.log(btn); 
  let body = document.getElementById("container")
  console.log(body)
  console.log("btn的长度"+btn.length); 
})

在onMounted中获取能够成功获取。但是如果我们要发送请求的话,Mounted中是不会等待挂载完成再发送请求的,这样就会引出一个新的问题,如果有一个echarts的图,异步获取数据之后渲染在页面上,然后根据页面视口的宽度来改变echarts的宽度,这样子获取显然就不行了。那又该怎么样获取呢?我们下一章见~

相关推荐
老坛0016 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛0017 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾10 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐14 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价15 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花16 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101316 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树17 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜18 分钟前
跨平台UI自动化-Appium
前端
海底火旺19 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js