在VUE里面获取dom和使用echarts
去vue官网好好看看ref和nextTick
首先说一下原因吧，就是echarts里面需要使用dom来挂载画布，这就意味着我们要获取dom，获取dom的方法呢有几种，普遍的就是getElementById，在vue里面还有一种方法，就是使用ref，在标签中写上ref=“test”，在methods里面就使用this.$ref.test 就可以实现获取dom，这里要注意$ref要注意下面两点。
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
这里项目里面就是在mounted(){} 钩子中调用，调用后使用了if（this.$ref.test）来判断是否为空，跳过空状态。注意这个不能直接判断而不使用mounted，不然可就是真的空着的了。
this.$nextTick(()=>{})这个的意思就是说在dom状态更新之后立即执行回调函数，这就是说获取新的dom，可以看看下面的博客。记住要点，vue对dom的更新diff是异步的。
www.jianshu.com/p/98148196a…
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
备注：
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，
console.log(this.$refs.input1)//
console.log(document.getElementById('input1'))//
这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。
<div id="app">
<!--在组件上使用ref属性-->
<my-component-01 ref="component01"></my-component-01>
<button type="button" @click="getElement">点击调用子组件的方法</button>
</div>
<template id="temp01">
<h1>{{msg}}</h1>
</template>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{},
methods:{
getElement:function(){
// 获取子组件的data
console.log(this.$refs.component01.msg)
// 调用子组件的方法
this.$refs.component01.func()
}
},
components:{
'my-component-01':{
template:'#temp01',
data:function(){
return {
msg:'我是子组件'
}
},
methods:{
func:function(){
alert('我是组件上的方法')
}
}
}
}
})
</script>
</body>
