Vue(Vue2+Vue3)——49.$nextTick

简介: Vue(Vue2+Vue3)——49.$nextTick

49 $nextTick


nextTick在开发中用的特别多企且使用起来特别简单,主要解决调用dom时机问题

语法:this.$nextTick(回调函数)

作用:在下一次 DOM 更新结束后执行其指定的回调。

什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。


49.1 案例说明


这里想让我的待办实现变成输入框的时候获取焦点

首先给输入框定义ref属性

然后控制

但是发现没用,这是一个调用时机的问题,我们可以通过定时器和nextTick解决


49.2 定时器实现


针对上面的情况,最简单的办法就是编写延迟定时器

虽然可以实现功能,但是不太好,官方给我们设计了$nextTick可以让我们解决类似的需求


49.3 nextTick实现


nextTick可以指定一个回调,这个回调会在dom节点更新之后再实现


49.4 总结


  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
相关文章
|
1天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
8 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
8 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript
vue知识点
vue知识点
6 2
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
29 9