【vue】能正确打印h1标签宽度的方法

能正确打印h1标签宽度的方法

<div id="app">
    <h1 ref="h1" v-if="show">nowcoder</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: false
        },
        mounted() {
            this.show = true;
  	  //code
        }
    })
</script>

 打印标签宽度的函数：this.$refs.h1.offsetWidth

这道题考察的是vue异步渲染，也就是说，虽然是数据驱动视图，但在修改数据以后并不能立刻渲染视图，在这个时候立刻获取dom元素中的属性，是不能获取到修改后的值的。

所以，咋办呢？

三种方式：

· $nextTick

this.$nextTick(function () {
    console.log(this.$refs.h1.offsetWidth)
})

nextTick的回调函数是等到dom元素渲染完成以后才会调用的。

· setInterval()

setInterval(()=>{
    console.log(this.$refs.h1.offsetWidth)
})

· setTimeout()

setTimeout(()=>{
    console.log(this.$refs.h1.offsetWidth)
})

这俩定时器异步操作，至少在执行完mounted函数以后才会调用。