Vue中$nextTick的使用

参数： {Function} [callback]

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

实例：

<template>
 <p ref="msgp">{{msg}}</p> 
<button @click="change">$nextTick</button> 
</div>
</template> 
<script>
export default { 
name: 'nextTick', 
data() { return { msg: '未更新' }},
methods: { 
change() { 
// 修改数据 this.msg = '被更新了' 
// DOM还没有更新 
console.log(this.$refs.msgp.innerHTML)
this.$nextTick(() => { 
// DOM更新了 
console.log('$nextTick:' + this.$refs.msgp.innerHTML) }) }},
created() { }}
</script>

$nextTick() 的应用场景:

在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在

created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以

此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。

mounted() 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和 渲染都已完成，此时在该钩子函数

中进行任何 DOM 操作都不会有问题，

在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置

$nextTick() 的回调函数中。