vue中的$nextTick()

Posted 2021-06-19 欧阳呀

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先加载完毕（更新完毕），再去执行它的方法。