vue中的nextTick的作用

news/2024/7/9 23:37:14 标签: vue, nextTick

vue里面,常用的事件onMounted里,总喜欢用一个nextTick

onMounted(() => {
  nextTick(() => {
    init();
  });
});

这个东西有啥用呢?我总搞不懂。

今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是,等前面的都执行完了,再执行nextTick里面的方法。比如说,页面上有一块内容,正常情况下是隐藏的,满足条件下才显示。这里用了v-if来控制。

页面

    <!-- 正常尺寸窗口 -->
    <div
      class="pop-container pop-container-normal"
      v-if="state.show && !state.minsize"
    >
      <div class="win-head-banner" @click="minimize()">
        <el-icon><Close /></el-icon>
      </div>
      <warn-new ref="new1"></warn-new>
    </div>

脚本

const new1 = ref();

const onMessage = () => {//某个事件触发了本函数,首先显示隐藏内容,然后调用其中的方法。
  restore();//展示隐藏部分
  nextTick(() => {
    new1.value.warning();//隐藏部分内容中,有一个部件new1,调用new1的方法
  });
};

由以上2段代码可知,某个事件触发下,首先显示隐藏内容,然后调用其中的某个部件的方法。假如这样写:

  restore();//展示隐藏部分
  new1.value.warning();//隐藏部分内容中,有一个部件new1,调用new1的方法

结果就是new1的方法没有被调用。为啥,因为隐藏内容尚未展示完毕。加上nextTick就可以,意思我想应该是,等待前面的语句执行完,才触发nextTick里面的方法。


http://www.niftyadmin.cn/n/4982526.html

相关文章

php 扩展pdo查询SqlServer中文乱码问题

默认是utf-8 或者可以强制utf-8 PDO::SQLSRV_ATTR_ENCODING>PDO::SQLSRV_ENCODING_UTF8 microsoft文档内容&#xff1a;&#xff08;常量 (Microsoft Drivers for PHP for SQL Server) - PHP drivers for SQL Server | Microsoft Learn&#xff09; 编码常量 PDO::SQLS…

idea2023远程调试

使用idea2023版远程调试springboot 1.添加remote jvm debug 2.填写远程ip, 选择要调试项目 3.将 参数附带到需要远程调试的jar 命令之前, 重启即可, 命令一定要在jar包之前 , -agentlib:jdwptransportdt_socket,servery,suspendn,address5005即 java -agentlib:jdwptranspor…

uniapp 开发小程序,封装一个方法,让图片使用线上地址

1.在main.js文件中&#xff0c;添加以下代码&#xff1a; 复制使用&#xff1a; // 图片使用网络地址 Vue.prototype.localImgSrc function(img){//项目的地址域名&#xff0c;例如百度return "https://baidu.cn/static/index/images/" img; }2.在页面中直接使用&…

Databend 开源周报第 108 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 多源数据目录 …

电缆厂 3D 可视化管控系统 | 图扑数字孪生

近年来&#xff0c;我国各类器材制造业已经开始向数字化生产转型&#xff0c;使得生产流程变得更加精准高效。通过应用智能设备、物联网和大数据分析等技术&#xff0c;企业可以更好地监控生产线上的运行和质量情况&#xff0c;及时发现和解决问题&#xff0c;从而提高生产效率…

android多屏触摸相关的详解方案-安卓framework开发手机车载车机系统开发课程

背景 直播免费视频课程地址&#xff1a;https://www.bilibili.com/video/BV1hN4y1R7t2/ 在做双屏相关需求开发过程中&#xff0c;经常会有对两个屏幕都要求可以正确触摸的场景。但是目前我们模拟器默认创建的双屏其实是没有办法进行触摸的 修改方案1 静态修改方案 使用命令…

下面是实践百度飞桨上面的pm2.5分类项目_logistic regression相关

part1:数据的引入&#xff0c;和前一个linear regression基本是一样 part2:数据解析——也就是数据的“规格化” 首先&#xff0c;打算用dataMat[]和labelMat[]数据存储feature和label&#xff0c;并且文件变量fr 然后&#xff0c;是这个for line in fr.readlines()循环&#…

vxe-table中树形结构

如图&#xff0c;同事让帮忙实现一个需求 从二级树节点开始&#xff0c;同时选中的只能有一个二级树节点&#xff0c;选中的二级树节点之下的子节点都可以被选中。否则不能被选中 直接上代码 需要注意的是&#xff0c;文中树状图传递的数据是打平的数据&#xff0c;设置代码是…