this.$nextTick()怎么使用？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了this.$nextTick()怎么使用？相关的知识，希望对你有一定的参考价值。
参考技术A 应用场景 ：
this.$nextTick() 方法主要是用在 随数据改变而改变的dom应用场景中 ，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this. $nextTick() 的回调函数中。
created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以， created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 ，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。
简单的理解，vue.js中this.$nextTick()就是起到了一个等待数据的作用，也就是说，将一些回调延迟，等到DOM更新之后再开始执行。简单点说，相当于setTimeout()的作用。
例如：
1.你改变了dom元素数据，然后你又想输出dom，那你只能等到dom更新完成之后才会实现.
2.通过事件改变data数据，然后输出dom，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值.
this.$nextTick()
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./vue2.js"></script> </head> <body> <div id="app"> <h1 id="myh">{{msg}}</h1> <button @click="change">点击</button> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { msg: ‘hello‘ }, methods: { change() { this.msg = ‘itcast‘ // console.log(document.getElementById(‘myh‘).innerText); // 如果直接这样打印，打印出来的结果不是我们想要的itcast，而是hello，因为this.msg = ‘itcast’ 它是异步的 // this.$nextTick()的作用是，等你页面上的刷新完之后，我再执行回调函数中的方法 this.$nextTick(() => { console.log(document.getElementById(‘myh‘).innerText) }) } } }) </script> </body> </html>
以上是关于this.$nextTick()怎么使用？的主要内容，如果未能解决你的问题，请参考以下文章