这个。$nextTick()将回调延迟到下一个DOM更新周期之后。修改后立即使用数据，然后等待DOM更新。它与全局方法Vue.nextTick相同，只是这部分回调会自动绑定到调用它的实例。

假设我们更改了一个dom元素内部的文本，此时我们希望在dom更新后直接打印出更改后的文本，就像我们把打印出来的代码放在setTimeout(fn，0)中一样；

我们先来看看个例子

模板

部分

div ref='hello '

h1Hello World ~/h1

/div

El-button类型=' dancer ' @ click=' get ' click/El-button

/section

/模板

脚本

导出默认值{

methods: {

get(){ 0

}

},

已安装(){ 0

console . log(333)；

console.log(这。$ refs[' hello '])；

这个。$ NextTick(()={ 0

console . log(444)；

console.log(这。$ refs[' hello '])；

});

},

已创建(){ 0

console . log(111)；

console.log(这。$ refs[' hello '])；

这个。$ NextTick(()={ 0

console . log(222)；

console.log(这。$ refs[' hello '])；

});

}

}

/script

从打印的顺序可以看出，执行created () hook函数时，dom根本不渲染，此时dom操作没有效果。用这个。created()中的$nextTick()可以在获取DOM对象之前等待DOM生成。

然后看第二个例子

模板

部分

h1 ref=' hello ' { value } }/h1

El-button类型=' dancer ' @ click=' get ' click/El-button

/section

/模板

脚本

导出默认值{

数据(){ 0

返回{

值： '你好，世界~ '

};

},

methods: {

get(){ 0

This.value=' hello

console.log(这。$refs['hello']。innerText)；

这个。$ NextTick(()={ 0

console.log(这。$refs['hello']。innerText)；

});

}

},

已安装(){ 0

},

已创建(){ 0

}

}

/script

根据上面的例子，如果直接在方法中打印，因为dom元素没有更新，所以打印的值仍然不变，通过这个得到的值。$nextTick()是dom更新后的值。

这个。$nextTick()在页面交互方面有很大的优势，尤其是在从后台获取数据并重新生成dom对象之后。这只是一个简单的例子，在实际应用中更有用~

转让：https://www.cnblogs.com/jin-zhe/p/9985436.html