vue2+webpack4引入less sass ,this.$ref.demo.clientWidth无法获取宽度&高度？

Question

项目工程如下，zhoulujun/webpack4-vue2-project-template

然后发现，

mounted(){
this.$ref.demo.clientWidth;//获取的是父节点宽度
this.$ref.demo.clientHeight;//值为0

this.$nextTick(()=>{
this.$ref.demo.clientWidth;//获取的是父节点宽度
this.$ref.demo.clientHeight;//值为0
});
setTimeout(()=>{//可以获取正确值
this.$ref.demo.clientWidth;
this.$ref.demo.clientHeight;
})
}

如果直接在元素上 style='表明宽度，高度' ，是可以获取的。

或者移除style 中的 lang="less"||lang="scss"

<style>
.demo{'表明宽度，高度' }
</style>

起先以为是webpack happyPack 原因，然后全部移除 happyPack ，发现还是如此，然后再修改less sass loader 配置

{
test: /.(less)$/,
use: [
'vue-style-loader',//将样式通过style标签的方式加入到dom中
'style-loader',
'sass-loader'
]
},

发现还是一样无法获取 宽度高度。
求哪位大神解惑，拜谢！

Answer 1

我觉得是这样的。
你的页面结构是由js 动态插入的，你在mounted生命周期去调用，dom 元素刚插入页面，这个时候要拿到页面的高度

【css写在style标签里的情况】，是要等dom渲染完毕，而dom的渲染是在微观任务队列执行完毕后进行的【至少js插入的是这样】，然后再把页面的高度算出来，才能拿到。
css 写在行内，通常dom在创建出来后便会进行虚拟的计算【你应该知道，通常a标签创建出来后可以不插入页面就可以操作】，所以你能在mounted 的时候拿到

再说为啥nextTick 不能拿到，这个看你的vue的版本【nextTick 实现的方式不同】【2.5可以拿到，因为内部实现是使用宏观任务 --- （setTimeout 等），其他版本（微观任务 --- promise 等）没意外多是不能的】