// 获取元素样式值 （存在单位）

let height = window.getComputedStyle(this.$refs.element).height; // 100px
//获取元素内联样式值（非内联样式无法获取）
 
let height = this.$refs.element.style.height; // 100px
                    Vue获取元素高度.// 当前区域<div ref="elememt"></div> // 获取高度值 （内容高+padding+边框）let height= this.$refs.elememt.offsetHeight;  //100// 获取元素样式值 （存在单位）let height = window.getComputedStyle(this...
可以在 mounted 钩子函数中获取到元素，然后使用 offsetHeight 属性获取元素高度。
mounted () {
  let element = this.$el.querySelector('.element')
  let heigh...
				
之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？
于是我就对比了一下之前使用ref定位的.vue文件，发现了他们之间的区别。
我们要想知道为什么会定位不到某个DOM节点，我们首先要理解mounted(){}这个钩子函数是用来做什么的。
下面是vue官方给出的vue生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与使用，他的参考价值会越来越高。
原来，mounted阶段，DOM结构准备就绪，但是这里的准备就绪需要特别说明一下：
	mounted() {//可以在这里面直接进行滚动条的获取
		window.addEventListener('scroll', this.getTopHeight , true)
	methods: {
		getTopHeight () {
		//方法...
声明式元素大小的观察者和提供者。
有时，当元素的内容更改时，您可能希望为其设置动画高度。 在这种情况下，您需要直接从DOM读取高度值，因为虚拟DOM无法获取元素大小。 由于它是低级操作，因此代码将变得更加混乱。
 vue-size-provider通过使用抽象帮助程序组件<SizeProvider>和<SizeObserver>隐藏低级代码来解决此问题。 以下gif是显示vue-size-provider如何工作的示例：
通过npm安装： 
$ npm install vue-size-provider
 然后，通知Vue使用它：
 import Vue from 'vue'
import VueSizeProvider from 'vue-size-provider'
Vue . use ( VueSizeProvider )
 或者，您可以直接使用这些组件
 <div class=labeloption class={checked:ageActive click=changeStatus(11)>0-16岁</div>
 <div class=labeloption class={checked:ageActive click=changeStatus(12)>17-25岁</div>
 <div class=labeloption :class={checked:ageAc
Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调
补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
使用 vue 的时候，想要
当发送一条消息或者是收到一条消息，消息展示界面不能滑到最下面，展示最新消息，于是，经过一段时间的修改，发送新消息时，滚动条虽然能下滑，但是滑不到最底部，于是我添加了一个按钮，使用按钮，将滚动条滑到最底部是可行的。又使用debug调试，发现：vue会先执行你的其它方法，再渲染页面，导致总是只能滑到上一条消息展示的高度。
于是我再百度，发现：重置数据后，获
2、获取元素样式值：（存在单位）
let height = window.getComputedStyle(this.$refs.element).height; // 100px
3、获取元素内联样式值：（非内联样式无法获取）
  this.$watch('elementHeight', newHeight => {
    // 当 elementHeight 变化时，这里的代码将会执行
    console.log(`元素的新高度是：${newHeight}`)
在你的模板中，你可以使用元素的 offsetHeight 属性来获取它的高度：
<template>
  <div ref="element" @click="updateHeight">点我更新高度</div>
</template>
<script>
export default {
  methods: {
    updateHeight() {
      this.elementHeight = this.$refs.element.offsetHeight
</script>
现在，当你点击这个元素时，你就可以在控制台看到元素的新高度了。