vue中的nextTick的作用

这篇具有很好参考价值的文章主要介绍了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里面的方法。文章来源地址https://www.toymoban.com/news/detail-682248.html

到了这里,关于vue中的nextTick的作用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【源码&库】Vue3 中的 nextTick 魔法背后的原理

    根据官网的简单介绍, nextTick 是等待下一次 DOM 更新刷新的工具方法。 类型定义如下: 然后再根据官网的详细介绍,我们可以知道 nextTick 的大体实现思路和用法: 当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到

    2024年02月03日
    浏览(45)
  • 揭秘Vue 2中的$nextTick:等待DOM更新的神奇时刻!

    在 Vue 2 中, $nextTick 是一个异步方法,用于在下次 DOM 更新循环结束后执行回调函数。 它的原理可以解析如下: Vue 2 维护了一个队列,用于存储需要延迟执行的回调函数。 下面是一个简单的代码案例,演示了 Vue 2 中的 $nextTick 方法和队列机制: HTML: JavaScript: 在上述代码中,

    2024年02月12日
    浏览(38)
  • Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?

    nextTick 是一个用于异步操作的函数,用来在当前执行栈执行完毕后,在下一个事件循环中执行指定的回调函数。它通常用于在本轮事件循环结束前执行一些需要延迟执行的代码。 具体来说, nextTick 将指定的回调函数放入微任务队列中,确保在下一个事件循环中立即执行。这

    2024年02月12日
    浏览(43)
  • 在vue中如何使用nextTick ?nextTick 的原理是什么?

    Vue.js 是一个流行的前端框架,它提供了一种响应式的数据绑定机制,使得页面的数据与页面的 UI 组件之间能够自动同步。Vue.js 中的数据驱动模型可以让开发者专注于业务逻辑,而不用过多地关注页面 DOM 操作的细节。然而,在某些情况下,我们需要在页面中进行 DOM 操作,而

    2023年04月20日
    浏览(39)
  • Vue $nextTick

    我们用一个例子来说明$nextTick的作用: 我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。 我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。 但是我们点击按钮过后并没有生效。    为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.fo

    2024年02月08日
    浏览(34)
  • vue3 nextTick()应用

    在Vue3中,可以使用 nextTick 函数来延迟执行某些操作,这些操作会在下一次DOM更新周期之后执行。这个函数通常用于在数据更新后,等待DOM更新之后执行一些操作,比如获取DOM元素的尺寸、位置等。 例如,以下一个切换元素显示的组件: 打印结果: 如果show是true,那么conte

    2024年02月04日
    浏览(41)
  • vue3使用nextTick

    Vue之nextTick原理 nextTick原理 发现nextTick必须放在修改一个响应式数据之后,才会在onUpdated之后被调用,如果nextTick是放在所有对响应式数据修改之前,则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行,才能拿到渲染得

    2024年02月05日
    浏览(38)
  • Vue3 nextTick()使用教程

    简单定义:等待下一次 DOM 更新刷新的工具方法 类型: 需求:一个表单提交,父组件2中定义一个方法,用于验证父组件1中表单 思路:父组件2中要拿到父组件1中form 方法: 1.在父组件1中应用nextTick(),拿到ref,存入vuex 2.在父组件2中,通过vuex拿到传过来的ref,然后通过validat

    2024年02月13日
    浏览(33)
  • vue3中使用nextTick

    1、引入nextTick 2、使用

    2024年02月09日
    浏览(32)
  • 管道在Vue和Angular中的作用及React的替代方案

    本文主要讲解管道在Vue和Angular中有哪些作用以及React对于管道概念的替代方案是什么。 计算机中的Pipline(管道)常被认为起源于Unix,最初Mcllroy发现很多时候人们会将shell命令的输出传递给另一个shell命令,类似于管道。所以就提出了管道的概念。并在1973年实现了这个管道概

    2024年02月04日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包