需求与问题：
最近需要一个图表显示的项目，选择了echarts,其中初始化chart对象时候需要
获取dom节点，在vue中就使用了ref来调用，但是显示的图表的宽度显示有问题
原因分析：
vue 使用ref 标记元素，然后获取时，由于vue生命周期，其先产生虚拟dom节点，最后才挂载到页面上去，所以在获取 this.$refs.chart1 可能没有找到对应的dom节点
参考链接如下：
this.$nextTick()的原理
解决方法：
-
setTimeout设置延迟, 但是time无法确定 -
this.$nextTick等待dom加载任务完成，进入下一次执行的队列中
使用方法：
this.$nextTick()的使用方法有两种：
- 回调函数写法
this.$nextTick(function() {
// this is your callback
})
2.promise写法
this.$nextTick().then(()=> {
// return a promise
}).bind(this)
以上内容仅供学习使用，如有侵权请联系删除。
网友评论