首页 > 其他分享 >vue2的nextTick使用

vue2的nextTick使用

时间:2022-08-25 14:56:03浏览次数:49  
标签:nextTick Dom 更新 re vue2 使用 回调 datas

1、关于nextTick。

vue中的Dom更新是异步的,是异步的意味着当被处理数据是动态变化时,此时对应的Dom未能及时更新(同步更新)就会导致数据已经更新(model层已经更新)而视力层未更新(Dom未更新)此时就需要使用nextTick了。
当你想要拿到更新后的Dom,一定要在nextTic的回调函数中去获取更新后的Dom的值。
如`this.$nextTick(()=>{})

this.$nextTick(()=>{
 在这里获取dom更新后的值
})

注意:在下次Dom更新循环之后去执行回调函数,修改model层数据之后,立即在这个回调中获取更新后的dom。
回调的调用时机:需要在视图更新之后,基于新的视图上进行操作。

 1   featchData(val) {
 2       this.$nextTick(async () => {
 3         const re = await getHeader($.param(val));
 4         this.recursionFunction(re.datas.records);
 5         this.treerData = re.datas.records;
 6 
 7         // 取父级传过来的id,取不到就从本地缓存取
 8         if (this.$route.query.row.id) {
 9           this.fatherId = this.$route.query.row.id;
10         } else {
11           this.fatherId = localStorage.getItem("cloudRow");
12         }
13         // 获取之前保存的sheet数据
14         let res = await obtainContext(this.fatherId);
15         // 判断 不为空 再赋值
16         if (res.datas.context != "") {
17           this.initializationSheetData = JSON.parse(res.datas.context);
18         }
19       });
20     },

修改数据后Model层会立即同步更新了,而Dom并没有及时更新,而在回调函数中的Dom的值是更新后的,那么回调函数到底做了什么 呢,在数据变化之后立即使用this.$nextTick(callback),callback又称延迟回调,而此回调在dom更新完成后就会自动调用(它会等待Dom更新完成)。

标签:nextTick,Dom,更新,re,vue2,使用,回调,datas
From: https://www.cnblogs.com/ccKing/p/16624262.html

相关文章

  • kibana 使用
    kibana官方地址:https://www.elastic.co/guide/en/kibana/7.8/xpack-security.htmlIndexManagementViewindexsettings,mappings,andstatisticsandperformoperati......
  • Wireshark软件使用教程
    引用网址:https://www.cnblogs.com/cainiao-chuanqi/p/15910553.htmlWireshark是非常流行的网络封包分析软件,可以截取各种网络数据包,并显示数据包详细信息。常用于开发测试......
  • psftp 的使用
    打开工具连接服务器[email protected]  上传和下载分别通过put和get命令来实现:下载上传文件夹,加上那个递归符号-r下载  上传 ......
  • VS2019使用dbml数据文件
    1.场景:以前的项目数据库对象用的是dbml,但是因为VS使用的是2019,打开就没有图像了(只能手动写映射类对象属性)2.处理方式;安装【LINQtoSQL工具】和【EntityFramework6......
  • ArrayList集合概述和基本使用和常用方法和遍历
    ArrayList集合概述和基本使用数组的长度不可以发生改变但是ArrayList集合的长度是可以随意变化的对于ArrayList来说,有一个尖括号<E>代表泛型泛型:也就是转正集合当中的......
  • 使用git的知识积累
    1、当你使用gitUI来拉取项目的时候,在目标路径下,一定要放没有的路基。比如D:\\gitproject\xxxProject一定要是不存在的,如果在电脑中已存在则会报错......
  • lerna的使用(三)
    lerna使用1、原生脚手架开发痛点分析1.痛点一:重复操作-多Package本地link-多Package本地安装-多Package单元测试-多Package代码提交-多Package代码发布......
  • ESP32-S2上使用SPI接口芯片DM9051NP转以太网的无线物联网网关开发指导
    (98条消息)ESP32-S2上使用SPI接口芯片DM9051NP转以太网的无线物联网网关开发指导_qq1667532的博客-CSDN博客_spi转以太网芯片......
  • 华为云开天 aPaaS 平台的流使用体验
    笔者在SAP成都研究院工作时,曾经在标准产品开发和项目原型开发中,使用过SAP的工作流解决方案。最近得知华为云开天aPaaS平台开启了公测,其中提到的一个亮点,就是其流功能......
  • 使用正则表达式实现字符串的多位转义
     最近在项目中遇到一个问题,由于对象的名称属性中可能含有一些特殊字符,可能会造成后面处理的时候与分隔符冲突,因此解决思路是先转义避免冲突,最后处理完后再反转义回来。......