1. $nextTick的定义
官方说明：
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
2. 使用场景
一般用于：
当父组件引入了某子组件时，父组件去调用子组件的方法。
如果不采用此方法，如下：
<template> <div> <!-- 此为子组件--> <homeData :width="width" :height="height" :id="id" :dataObj="dataObjEcharts" ref="hd" > </homeData> </div> </template> <!-- 父组件的方法--> parentFn(){ // 如果直接去调用子组件的方法 // 可能会报错，或者执行无效 this.$refs.hd.drawLine(); }
如果直接去调用子组件的方法，可能会报错，或者执行无效。
所以我们需要在外层包裹此函数：
<!-- 父组件的方法--> parentFn(){ // 正确的调用方式 this.$nextTick(() => { this.$refs.hd.drawLine(); }); }
3. 总结
所以，简单来说：
调用子组件方法的外层加了这个函数包裹，相当于是让子组件dom先加载完毕（更新完毕），再去执行它的方法。
