this.$nextTick()怎么使用?

应用场景
vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变,都应该放进this.$nextTick()的回调函数中。

created()中使用的方法时,dom还没有渲染。所以,created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

mounted()的钩子函数则是在dom完全渲染后才开始渲染数据,所以在mounted()中操作dom基本不会存在渲染问题。

简单的理解,vue.js中this.$nextTick()就是起到了一个等待数据的作用,将一些回调延迟,等到DOM更新之后再开始执行。简单点说,相当于setTimeout()的作用。

例如:
1.你改变了dom元素数据,然后你又想输出dom,那你只能等到dom更新完成之后才会实现.
2.通过事件改变data数据,然后输出dom,在方法里直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值,而通过this.$nextTick()获取到的值为dom更新之后的值.


 



this.$nextTick()怎么使用?_第1张图片

this.$nextTick()怎么使用?_第2张图片

你可能感兴趣的:(uni-app,VUE学习笔记,vue)