vue中的nextTick的作用

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

javascript 复制代码
onMounted(() => {
  nextTick(() => {
    init();
  });
});

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

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

页面

html 复制代码
    <!-- 正常尺寸窗口 -->
    <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>

脚本

javascript 复制代码
const new1 = ref();

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

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

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

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

相关推荐
wuaro19 小时前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会2 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
YiHanXii3 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生4 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎4 天前
Vue3当中el-tree树形控件使用
vue
Num_9_G7 天前
使用vue cli 5.0 在vscode中运行vue命令报错
vue
小二·7 天前
Node.js 下载安装及环境配置教程、卸载删除环境配置超详细步骤(附图文讲解!) 从零基础入门到精通,看完这一篇就够了
前端框架·node.js·vue
HBR666_8 天前
菜单(路由)权限&按钮权限&路由进度条
前端·vue
等什么君!9 天前
ElementPlus 快速入门
vue