vue在munted中获取dom高度不准确的问题

Posted 2020-12-15 rainbowlover

今天遇到这么个问题：

在组件中给div设置了默认的高度100px，然后父组件也会传入样式120px，在mounted中获取div的高度会获取到默认的高100px而不是渲染的高120px;就算加上$nextTick也是一样。

data () {
    return {
      itemHeight: 0,
    }
  },
mounted () {
     // this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     this.$nextTick(() => {
       this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     })
  }

//style
.item {
  width: 100%;
  height: 100px;
}

 

问题就是这么个问题；那怎么办呢？

data () {
    return {
      itemHeight: 0,
    }
  },
mounted () {
     // this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     // this.$nextTick(() => {
     //   this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     // })
    setTimeout(() => {
      this.itemHeight = this.$refs.item.$el.offsetHeight // 120
    }, 0)
  }

//style
.item {
  width: 100%;
  height: 100px;
}

用setTimeout就可以了，网上有位兄台说setTimeout延迟500毫秒，可以我这样延迟0秒也可以，亲测可以，为啥呢？

加延迟也就是为了让页面完全渲染完成之后再去获取高度，用了setTimeout就已经实现这个效果了，因为setTimeout里边的代码就是页面渲染完成之后执行的；

 

这涉及到线程问题了 ， 简单说一下吧：

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

 

这样就好像android里只能在主线程里操作视图，不能在主线程里做耗时操作，子线程做了耗时操作需要更改视图时候要通过handler通知主线程；

 

说到这里就再多说两句：什么样的代码会被丢到任务栈里边呢？简单说就是回调函数里边的代码都会被丢到任务栈里边。比如ajax，setTimeout，点击事件等。

 

都是自己理解，有不对的地方欢迎下方评论。

 

关于任务栈渲染线程这位仁兄写的很不错，可以详细看看https://www.cnblogs.com/jiasm/p/9482443.html

 

over