专栏首页前端逗逗飞vue小技巧—nextTick

vue小技巧—nextTick

nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。

使用方法

this.$nextTick(function(){// 更新了dom})
vue2.1.0后返回了Promise对象,所以可以使用.then()或者结合async await语法糖使用
复制代码

使用场景

在弹出对话框的同时通过ref获取内嵌表格的实例。需等待此次DOM更新完毕,表格组件被挂载到父组件上才能正确获取。这时候就需要结合this.$nextTick使用。

async onOpenDialog() {
      this.model.visible = true
      // undefined
      console.log(this.$refs.form)
      setTimeout(function() {
      // window
        console.log(this)
      }, 100)
      this.$nextTick(function() {
        // parent vm 有疑惑吗?
        console.log(this)
        // form vm
        console.log(this.$refs.form)
      })
      await this.$nextTick()
      // form vm
      console.log(this.$refs.form)
      this.$nextTick().then((vm)=>{
      // parent vm
      console.log(vm)
      // form vm
      	console.log(this.$refs.form)
      })
    }
复制代码

源码解析

function nextTick (cb, ctx) {
    var _resolve;
      // 放入回调函数,等待DOM重新渲染完毕后执行
    callbacks.push(function () {
      if (cb) {
        try {
          // 修改执行上下文,指向当前页面实例
          // 所以在我们没有使用箭头函数的前提下,this指向仍然正确
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
    }
// 原型链上,挂载此方法
Vue.prototype.$nextTick = function (fn) {
      //参数1:回调函数,参数二:页面实例执行上下文
      return nextTick(fn, this)
    };
复制代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue中$nextTick的理解

    Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更...

    WindrunnerMax
  • Vue源码再读

    一些高频用法及技术点:类,函数柯里化,递归, Object.create,Object.defineProperty,macrotask,microtask,A...

    醉酒鞭名马
  • vue归纳笔记:对vue中nextTick()的理解及应用场景说明

    请记住:vue是依靠数据驱动视图更新的,该更新的过程是异步的。即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。视图...

    用户1272076
  • Vue源码阅读 - 批量异步更新与nextTick原理

    vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

    前端下午茶
  • Vue为何采用异步渲染

    Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被...

    WindrunnerMax
  • vue小技巧

    vue init <template> <dir> 可以根据模版创建项目 ,可供选择的模版有 browserify browserify-simple ...

    lilugirl
  • nextTick的原理及运行机制

    主线程的执行过程就是一个tick,而所有的异步结果都是通过 "任务队列" 来调度。消息队列中存放的是一个个 macro task 结束后,都要清空 所有的 mi...

    木子星兮
  • 高级前端开发者必会的34道Vue面试题解析(三)

    通过前面的文章,我们认识了页面的响应是由Vue实例里的data函数所返回的数据变化而驱动,也重点学习了页面的响应与数据变化之间是是如何来联系起来的,并且分别在V...

    用户1462769
  • Vue的异步更新实现原理

    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?...

    肉眼品世界
  • Node 事件循环究竟是如何工作的: 为何大部分的事件循环图都是错的

    当 Bert 在 2016 年欧洲 Node 交流大会上提出关于事件循环的主题时,他以一句“大部分的事件循环图都是错的”开场。我很愧疚,我演讲中也用过一些错误的...

    疯狂的技术宅
  • 面试题:Vue中$nextTick原理

     在做项目的时候,我们经常会用到nextTick,简单的理解就是它就是一个setTimeout函数,将函数放到异步后去处理;将它替换成setTimeout好像也...

    前端迷
  • Vue1.x 写法示例

    常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

    前端GoGoGo
  • 面试官:Vue中的$nextTick怎么理解?

    我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新

    @超人
  • 从 Event Loop 角度解读 Vue NextTick 源码

    https://juejin.cn/post/6963542300073033764

    winty
  • 【Vuejs】952- 一文带你了解vue2之响应式原理

    在面试的过程中也会问到:请阐述vue2的响应式原理?,凡是出现阐述或者理解,一般都是知无不言言无不尽,知道多少说多少。接下来,我来谈谈自己的理解,切记不要去背,...

    pingan8787
  • 「真香警告」鱼头手摸手教你在小程序里用composition-api

    配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下

    陈大鱼头
  • 面试必考:真的理解 $nextTick 么

    浏览器(多进程)包含了「Browser进程」(浏览器的主进程)、「第三方插件进程」和「GPU进程」(浏览器渲染进程),其中「GPU进程」(多线程)和Web前端密...

    coder_koala
  • use vue vuex vue-router, not use webpack

         vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑。因为...

    sam dragon
  • Vue2.x 写法示例

    注意:只在可信内容上使用 v-html,永不用在用户提交的内容上,否则会导致XSS攻击。

    前端GoGoGo

扫码关注云+社区

领取腾讯云代金券