能正確列印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函式以後才會呼叫。