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里面的方法。

相关推荐
Yaml49 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf12 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班
ZSK63 天前
【uniapp3】分享一个自己写的h5日历组件
vue·uniapp