vue在mounted中获取元素宽度不准确的问题_vue组件深层嵌套mounted获取元素尺寸不准确-程序员宅基地

遇到这样一个问题：
在组件mounted生命周期中获取类名为newForm元素的宽度

   mounted(){
    
        this.formWidth = document.querySelector('.newForm').offsetWidth
        console.log('formWidth',this.formWidth)
   },

审查元素发现，元素的宽度为1695
在这里插入图片描述
但是控制台打印输出的一直都是1890

查资料发现可能是页面没有完全渲染完毕就去获取了元素的宽度
加个延迟就可以解决

修改后的代码：

mounted(){
    
    setTimeout(()=>{
    
        this.formWidth = document.querySelector('.newForm').offsetWidth
        console.log('formWidth',this.formWidth)
    },0)
},

输出元素宽度为1695
在这里插入图片描述

这就涉及到了线程的问题：
js里有个渲染线程类似于java里边的主线程，主线程按顺序执行代码，执行完才会有空去看看任务栈里边有没有任务需要执行，有的话就拿来到主线程里边执行，setTimeout就把里边的代码放到任务栈中（类似于子线程）了，所以setTimeout里边这部分代码会在主线程执行完才会执行；

宏任务和微任务也需要了解一下 javascript的宏任务和微任务

本文链接：https://blog.csdn.net/weixin_41257563/article/details/107208009

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

几个比较简单的题，但是。。。。。_g最近想给女友送两个精美的小礼品:两个底面半径分别为r1和r2的圆柱形宝石,并想装-程序员宅基地

文章浏览阅读714次。A - 18岁生日Gardon的18岁生日就要到了，他当然很开心，可是他突然想到一个问题，是不是每个人从出生开始，到达18岁生日时所经过的天数都是一样的呢？似乎并不全都是这样，所以他想请你帮忙计算一下他和他的几个朋友从出生到达18岁生日所经过的总天数，让他好来比较一下。 Input一个数T，后面T行每行有一个日期，格式是YYYY-MM-DD。如我的生日是1988-03-07。_g最近想给女友送两个精美的小礼品:两个底面半径分别为r1和r2的圆柱形宝石,并想装

HUAWEI华为笔记本平板电脑MateBook E 2019款高通版PAK-AL09原装出厂Win10ARM系统1809恢复原厂OEM系统_pak-al09 怎么装系统-程序员宅基地

文章浏览阅读2k次。HUAWEI华为笔记本平板电脑MateBook E 2019款高通850版8GB+256GB(PAK-AL09)原装出厂WIN10ARM系统恢复原厂系统1809。_pak-al09 怎么装系统

pandas中的 fillna使用（pandas.DataFrame.fillna）_pandas fillna-程序员宅基地

文章浏览阅读3w次，点赞10次，收藏53次。api参考：fillna：使用指定的方法填充 NA/NaN 值。>>> df = pd.DataFrame([[np.nan, 2, np.nan, 0], [3, 4, np.nan, 1], [np.nan, np.nan, np.nan, 5], [np.nan, 3, np.nan, 4]], columns=list._pandas fillna

视频分割、分类、行为标注工具_视频标注工具-程序员宅基地

文章浏览阅读3.2k次。AI视频标注工具，可以用于分割、分类、行为的视频标注工具_视频标注工具

【微服务】03-HttpClientFactory与gRpc_grpc httpclientfactory-程序员宅基地

文章浏览阅读842次。HttpClientFactory与gRPC_grpc httpclientfactory

PMP考试流程是怎么样的？-程序员宅基地

文章浏览阅读768次，点赞13次，收藏13次。PMP的考证成本是由考试费+培训费组成，考试费是固定的3900元（如一次没过，补考费2500元），培训费根据自己选择的PMP培训机构而定，目前我们能够选择的机构比较多，同时也是各有千秋，价格也是从2500-3500元不等，我选择的机构是威班PMP，通过率高，教的不错，并且价格也便宜，活动上1600多入手（好像近期也有），恢复原价后是2298元，个人体验不错，也推荐大家选择这一类性价比高的机构。老师教的不错，课程质量又高，通过率不高才是奇怪的事情。

随便推点

linux 如何自动运行程序-程序员宅基地

文章浏览阅读1.8k次。在Linux中自动运行程序有以下几种方式：1．开机启动时自动运行程序　　Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init。init根据配置文件继续引导过程，启动其它进程。通常情况下，修改放置在 /etc/rc或 /etc/rc.d 或 /etc/rc?.d 目录下的脚本文件，可以使init自动启动其它程序。例如：编辑 /etc/rc.d/rc.local 文件，在文件

VUE项目导入bootstrap_bootstrap怎么全局加载-程序员宅基地

文章浏览阅读1.9k次，点赞2次，收藏10次。进来踩坑吧_bootstrap怎么全局加载

学习java框架-J2EE体系-Spring-IOC-AOP-Bean-事务-_j2ee和ssm-程序员宅基地

文章浏览阅读808次。Spring：AOP面向方面编程、IoC控制反转、事务、Bean是构成应用进程主干、由IoC容器创建的对象。_j2ee和ssm

DAY14_1x1卷积核的作用_如何扩展卷积核使其尺寸为16*16-程序员宅基地

文章浏览阅读2.1k次。1x1卷积核虽然不能进行上/下采样，但在CNN中仍有很重要的作用1x1卷积核的作用升维、降维首先一个很简单的例子，feature map 大小为16x16 channel = 8，通过一个1x1 数量为4的卷积核，得到的输出就为16x16x4降维最明显的影响就是增加了网络的深度，但是并不会增加网络的参数量，通过不同大小卷积核的组合，同时也可以大幅度减小计算量输入56 * 56 * 192，使用5 * 5 * 32的卷积核。最终的计算量是：56 * 56 * 32 * 5 * 5 * 192 _如何扩展卷积核使其尺寸为16*16

webpack打包，报错this.getOptions is not a function？这篇文章或许对你有用_webpack this.getoptions is not a function-程序员宅基地

文章浏览阅读1.1k次。webpack打包，突然报错this.getOptions is not a function？是不是像这种报错？是不是偷偷下载loader了？这种问题一般就是该loader版本过高了，可以换个低版本的，可以去npm里面找找该loader的低版本，反正我都是这么解决的写这篇文章，目的是为了纪念因为这个错误纠结好久的日子，顺道希望可以帮到你，要是还解决不了，可以联系作者..._webpack this.getoptions is not a function

在显存不足时，增加batch size的方法_显存不够可以改batch吗-程序员宅基地

文章浏览阅读4.9k次，点赞2次，收藏14次。问题：如何在显存不足的情况下，增加batch-size？换言之，如何增加batch-size而无需扩大显存？思路：将batch数据，分为多个mini-batch，对mini-batch计算loss，再求和，进行反向传播。这样内存只占用mini-batch大小的数据，用时间换空间。pytorch实现：import torchfrom sklearn import metricsfrom torch import nnimport torch.nn.functio.._显存不够可以改batch吗