vue通過$ref獲取不到元素樣式？

將元素樣式寫到style標簽內(nèi)，通過$refs獲取到元素樣式全為空，
將元素樣式設置為行內(nèi)樣式，通過$refs可以獲取到。

如下代碼：

1.獲取不到樣式
<template>

<div class="tabbar" ref="tabbar">
    tabbar1
</div>

</template>

<script>

export default {
    data () {
        return {
            
        }
    },
    mounted () {
        console.log('he -- ',this.$refs.tabbar.style.height);
    }
}

</script>

<style lang="scss" scoped>
.tabbar {

position: fixed;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid #ccc;
height: 0.98rem;

}
</style>

2.可以獲取到樣式
<template>

<div style="height: 0.98rem;" class="tabbar" ref="tabbar">
    tabbar1
</div>

</template>

<script>

export default {
    data () {
        return {
            
        }
    },
    mounted () {
        console.log('he -- ',this.$refs.tabbar.style.height);
    }
}

</script>

<style lang="scss" scoped>
.tabbar {

position: fixed;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid #ccc;

}
</style>

哪位大俠知道不通過設置行內(nèi)樣式的方式，怎樣獲取到元素樣式？