vue2知识点:nextTick语法

简介: vue2知识点:nextTick语法

image.png

@[toc]

3.24 nextTick语法

image.png

说明:类似于定时器的功能

问题:什么场景会使用它呢?

答案:举例我想有个input输入框,我还有个“编辑”按钮,如图1,如图2,点击“编辑”按钮input输入框就聚焦,失焦就修改成功输入框的值。如图3你想实现45行到50行代码执行完,页面模板就重新解析渲染更新数据,然后你执行52行代码输入框就聚焦了,但实际页面显示压根不聚焦为啥?因为vue会把整个方法都执行完才会去渲染更新DOM节点(为啥要这么设计?因为如果一个方法里面修改8个属性值,我每修改一个DOM就渲染一次也太消耗资源了,所以设计成方法执行完毕了,用户属性都修改好了,我再去渲染DOM节点),所以52行会先执行,但是DOM还没渲染且输入框还没出来了,上哪里聚焦去,所以就出现了点击“编辑”按钮输入框聚焦失败的场景。
image.png

图1

image.png

图2

image.png

图3

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)

26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习:待办事项Todo-list案例练习

28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

目录
相关文章
|
Linux 编译器 程序员
【Linux 调试秘籍】深入探索 C++:运行时获取堆栈信息和源代码行数的终极指南
【Linux 调试秘籍】深入探索 C++:运行时获取堆栈信息和源代码行数的终极指南
1140 0
|
12月前
|
缓存 JavaScript
vue2知识点:全局事件总线(GlobalEventBus)
vue2知识点:全局事件总线(GlobalEventBus)
301 2
vue2知识点:全局事件总线(GlobalEventBus)
|
12月前
|
缓存 JavaScript
vue2知识点:消息订阅与发布
vue2知识点:消息订阅与发布
136 1
|
JavaScript
VUE上传功能本地上传正常,打包上传后报错TypeError: ***.upload.addEventListener is not a function
VUE上传功能本地上传正常,打包上传后报错TypeError: ***.upload.addEventListener is not a function
1639 0
|
7月前
|
数据采集 监控 API
淘宝淘口令 API 接口全攻略
### 淘口令 API 及相关服务简介 **一、淘口令 API(item_password)** - **功能**:将淘口令转换为商品链接或获取商品信息,支持生成自定义淘口令。 - **申请流程**:注册账号、创建应用、获取凭证、申请权限。 - **调用示例(Python)**:通过签名和请求参数调用接口,生成淘口令。 **二、第三方 API 服务** - **适用场景**:简化开发流程,支持高佣转链、淘口令解析等功能。 - **推荐接口**:万能淘口令生成、淘口令解析真实 URL。
|
12月前
|
存储 人工智能 自然语言处理
高级 RAG 技术:提升生成式 AI 系统输出质量与性能鲁棒性【预检索、检索、检索后、生成优化等】
高级 RAG 技术:提升生成式 AI 系统输出质量与性能鲁棒性【预检索、检索、检索后、生成优化等】
高级 RAG 技术:提升生成式 AI 系统输出质量与性能鲁棒性【预检索、检索、检索后、生成优化等】
|
12月前
|
JavaScript 前端开发 Java
vue2知识点:vue-cli脚手架配置代理服务器
vue2知识点:vue-cli脚手架配置代理服务器
226 7
|
12月前
|
缓存 JavaScript
vue2知识点:vm调用待$命令介绍
vue2知识点:vm调用待$命令介绍
69 2
|
12月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能的发展现状如何?
【10月更文挑战第16天】人工智能的发展现状如何?