位置: IT常识 - 正文

简单易懂 关于nextTick()的理解(关于简单的绘画)

编辑:rootadmin
简单易懂 关于nextTick()的理解 前言

推荐整理分享简单易懂 关于nextTick()的理解(关于简单的绘画),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:关于简单的话,关于简单的故事,关于简单的画画图片,关于简单的故事,关于简单的手抄报图片,关于简单的绘画作品,关于简单的,关于简单的,内容如对您有帮助,希望把文章链接给更多的朋友!

学习Vue的过程中,大家肯定都使用过nextTick(),关于nextTick()的使用时机,大家肯定都知道,那么它的工作原理是怎样的呢,本文就简单说一下它的nextTick()的工作原理。

nextTick的使用时机

首先记住:nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

举个例子:

在我自己做的一个单页面应用中,我有一个需求,当从后端请求回数据后,马上就对页面进行更新。比如,我要点击操作里的删除操作,前端删除数据后就向后端发请求,后端删除数据后返回数据,如果我们想马上显示到页面上,应该怎么做呢?

可能好多人会像我第一次做那样,比如我这个页面是用 v-for 遍历data这个数据显示出来的,可能好多人就会直接把前端返回的数据直接重新赋值给data。但是这样是绝对不行的!这样只会导致数据其实是变了,但是视图是不会变的,因为vue更新dom是异步的,无法通过同步代码赋值后马上去更新页面。所以即使删除成功了页面也不会显示出来。即使显示删除成功,页面也不会更新。

如何更新

我们的需求是,请求回数据后马上更新页面,首先理解几个点。

1、vue更新Dom是异步更新。简单易懂 关于nextTick()的理解(关于简单的绘画)

如图官网的描述,解释一下这段话,直接看可能有些懵,前两句话,关于同步和异步,以及提到的"事件循环",这就要从JS的运行机制说起,戳我前往。第三句话,“如果同一个 watcher 被多次触发,只会被推入到队列中一次”,这是什么意思呢,也在我的文章中可找到,戳我前往。

2、理解执行时机

读完上面两篇文章,大家应该就知道宏任务和微任务了把,而nextTick内部就是调用宏任务和微任务来完成事件调用的机制,让nextTick里的回调在一个事件循环的最后执行。为什么要在最后呢?在最后即意味着在所有异步任务之后,记得上一点吗,“vue更新Dom是异步更新”,而我们又把nextTick里的回调放在了所有异步任务的最后,这样就解释了最开始那句话,nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

3、回到例子实现需求

我们想要实现需求,本例我们采用热更新,即只更新局部组件。

我直接把我的子组件全放在router-view里的,通过变化v-if来实现组件更新。

看到这里可能有人会问,这不就是先把v-if设为false,再设置为true来实现吗,要不要nextTick都一样,那么这样想就大错特错了。

还记得刚才说的“如果同一个 watcher 被多次触发,只会被推入到队列中一次”,那篇文章已经解释过了,vue会把所有代码都执行了再去渲染页面,所以我们这两条this.$isRouterAlive = false 和 this.$isRouterAlive = true,相当于只执行了最后一条等于true,false都没执行过,所以相当于还是什么都没做,原始是true,现在还是true。

加了个nextTick就不一样了,这段代码就相当于告诉vue,vue你先帮我执行 this.$isRouterAlive = false,先不要管我nextTick里的东西,你去渲染完了最后再来执行我nextTick里的代码。

这样一说大家是不是就比较明白了,this.$isRouterAlive = true 是在页面渲染过后 再执行的,所以我们肉眼看其实已删除货物,页面马上就更新了,其实其中经过了先把router-view里的子组件取消掉,即v-if = false,然后再让 v-if = true,那么v-if大家都知道就是创建,相当于router-view里的内容被重新创建了,所以此时的数据也是最新的。

本文链接地址:https://www.jiuchutong.com/zhishi/300024.html 转载请保留说明!

上一篇:CSS 实现文字渐变色(css字体设置渐变色)

下一篇:前端面试:浅拷贝和深拷贝的区别?(前端常见面试)

  • 所得税为什么比利润高
  • 行政事业性收据发票记帐
  • 间接税种有哪些
  • 小规模企业所得税会计分录怎么做
  • 维修费税率是13的话归口什么类别
  • 偶然所得代扣代缴义务人
  • 增值税专用发票可以开电子发票吗
  • 农产品抵扣计算题
  • 运输企业车辆折旧一次性折旧
  • 所得税申报表中的资产总额如何填
  • 写字楼租金税率
  • 增值税专用发票和普通发票的区别
  • 期末存货跌价准备金额的确定
  • 银行 收美金
  • 免税收入的三个条件
  • 记名预付卡不得设置有效期不可赎回
  • 企业以前年度的关联交易与预约定价安排
  • 员工异地交纳保险怎么交
  • 集团公司转股要交印花税吗?
  • 补记去年收入分录
  • 教育培训机构涉税问题
  • 企业修路会计分录
  • 初级考试备考计划
  • 电子发票怎么开具流程
  • 供热企业所使用的燃气
  • 工业企业和其他企业经营的对象
  • 出口销售收入记账方法有哪些?
  • 增值税收入和所得税收入不一致怎么办
  • 营改增后的劳务费怎么开
  • 库存商品售价
  • 蓝屏代码0xc000000f
  • 哪些情况下可以终止心肺复苏
  • linux文件权限控制
  • php tr td
  • 产品销售核算会计分录
  • win10 累积更新
  • 委托代销商品的科目编码
  • 贷款损失会计处理
  • 在php中,字符串有哪些表示形式
  • php中false的作用
  • 土地增值税扣除项目金额怎么算
  • npp怎么安装
  • 郁金香地图
  • vue角色管理
  • 什么是会计确认的基础
  • 个体户怎么报增值税
  • 普通发票作废算额度吗
  • 免征的教育费附加怎么做账
  • 库存周转率会大于1吗
  • 用友应收系统凭证冲销后查询不到怎么办
  • 支付劳务费的账务处理
  • 出口退税一般程度是什么
  • 递延所得税资产和递延所得税负债
  • 老板借给公司钱需要交税吗
  • 生产车间包括什么
  • 公司员工垫付款项
  • 期末库存商品结转分录
  • 所得税费用为什么不计入营业利润
  • 股东权益净资产收益率计算公式
  • mysql基本介绍
  • ubuntu系统怎么用
  • mac怎么安装ios
  • linux mount -o remount
  • linux 杀掉指定用户的进程
  • linux远程gui
  • win7控制面板找不到windows update
  • win7如何升级到win10有什么要求
  • win7 64位旗舰版下载后怎样禁用搜索记录?win7禁用搜索记录的设置方法
  • 如何让win8系统变快
  • win7怎么打开磁盘管理器
  • win8手提电脑怎么关闭触摸板
  • Windows10系统下iis没有注册.netFrameWork4.0的原因
  • 探索世界怎么玩
  • bootstrap tooltip
  • 简述jquery的实现原理
  • csh,tcsh,bash,sh等shell的区别
  • unity教程完整版
  • android开发指南
  • 环保信用评价等级分级情况
  • 代扣app有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设