参数:
{Function} [callback]
用法:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
//第一个例子 <template> <div> <div ref="hello"> <h1>{{value}}</h1> </div> <button @click="get">点击</button> </div> </template> <script> export default { data(){ return{ value:'hello,world!' } }, methods:{ get(){ // this.value = '你好' // console.log(this.$refs['hello'].innerHTML); // this.$nextTick(()=>{ // console.log(this.$refs['hello'].innerHTML) // }) } }, mounted(){ console.log('mounted'); console.log(this.$refs['hello']) this.$nextTick(()=>{ console.log('Dom改变了mounted') console.log(this.$refs['hello']) }) }, created(){ console.log('create'); console.log(this.$refs['hello']) this.$nextTick(()=>{ console.log('Dom改变了created') console.log(this.$refs['hello']) }) } } </script>从打印的顺序可以看到,在create钩子函数执行DOM时,还未进行渲染,此时对Dom操作无用;而在create钩子函数里面使用this.$nextTick(),可以等待dom生成之后调用。
//第二个例子 <template> <div> <div ref="hello"> <h1>{{value}}</h1> </div> <button @click="get">点击</button> </div> </template> <script> export default { data(){ return{ value:'hello,world!' } }, methods:{ get(){ this.value = '你好' console.log(this.$refs['hello'].innerHTML); this.$nextTick(()=>{ console.log(this.$refs['hello'].innerHTML) }) } } } </script>点击之后 根据上面的例子可以看出,在方法里直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值,而通过this.$nextTick()获取到的值为dom更新之后的值