它主要是处理我们在变更完数据以后，无法立刻拿到最新的DOM节点对象的问题
<template>
<div class="hello">
<h1 ref="getnext">{{csjg}}</h1>
<button @click="getBtn">改变值</button>
</div>
</template>
<script>
export default {
data() {
return {
csjg:'测试结果222'
};
},
methods: {
getBtn() {
this.csjg='nexttick的结果值'
console.log(this.$refs.getnext.innerHTML);
},
},
};
</script>
在这个组件中，name属性绑定了名为“getnext”的ref引用，这样我们就可以对该DOM节点进行操作。我们在changeName方法中，做了两件事情：首先我们改变了name属性的值，然后我们使用vue的this.$refs方法拿到了真实的dom节点，并打印了dom节点的内容，控制台打印的内容如下：
测试结果222
很显然这不是我们想要的数据，因为我们改变了组件属性中的name属性，这时候打印的名称应该是'nexttick的结果值'才对。 我们来用this.$nextTick()方法来改写这个组件：
getBtn(){
this.csjg='nexttick的结果值'
this.$nextTick(()=>{
console.log(this.$refs.getnext.innerHTML)
})
}
控制台打印的内容如下：
nexttick的结果值
这就是this.$nextTick()的作用，帮助我们在改变组件中属性以后，立刻拿到渲染以后的dom节点对象
