vue通过$ref获取不到元素样式？

Question

将元素样式写到style标签内，通过$refs获取到元素样式全为空，
将元素样式设置为行内样式，通过$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>

哪位大侠知道不通过设置行内样式的方式，怎样获取到元素样式？

Answer 1

this.$refs.tabbar.style.offsetHeight);

Answer 2

上面的情况

this.$refs.tabbar.height

下面的情况

this.$refs.tabbar.style.height

Answer 3

您好，这个问题解决了么？