49 $nextTick
nextTick在开发中用的特别多企且使用起来特别简单,主要解决调用dom时机问题
语法:this.$nextTick(回调函数)
作用:在下一次 DOM 更新结束后执行其指定的回调。
什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
49.1 案例说明
这里想让我的待办实现变成输入框的时候获取焦点
首先给输入框定义ref属性
然后控制
但是发现没用,这是一个调用时机的问题,我们可以通过定时器和nextTick解决
49.2 定时器实现
针对上面的情况,最简单的办法就是编写延迟定时器
虽然可以实现功能,但是不太好,官方给我们设计了$nextTick可以让我们解决类似的需求
49.3 nextTick实现
nextTick可以指定一个回调,这个回调会在dom节点更新之后再实现
49.4 总结
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。