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的宽度,这样子获取显然就不行了。那又该怎么样获取呢?我们下一章见~

相关推荐
石金龙28 分钟前
[译] Composition in CSS
前端·css
白水清风31 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix43 分钟前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780043 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端43 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧43 分钟前
Promise 的使用
前端·javascript
NBtab1 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins