专栏首页coding个人笔记Vue异步更新队列及nextTick

Vue异步更新队列及nextTick

vue通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM。Vue的dom更新是异步的,当数据发生变化,vue并不是里面去更新dom,而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。

比如我们调用一个方法,同时涉及多个数据的操作改变,vue会把这一些列操作推入到一个队列中,相当于JavaScript的同步任务,在执行过程中可能会出现一些产生任务队列的异步任务,比如定时器、回调等。

在vue里面任务队列也叫事件循环队列。我们都知道JavaScript是循环往复的执行任务队列。Vue也一样,在一个同步任务过程中是不会去更新渲染视图,而是在同步任务(事件循环队列)执行完毕之后,在主线程的同步执行完毕,读取任务队列时更新视图。

这个机制对于页面性能是非常重要的,试想一下,我们要是每操作一个数据就更新一次视图,那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图,可以避免特别多的重复操作。

在开发过程中,我们很容易遇见需要先渲染数据然后操作dom,这时候就要使用vue提供的nextTick函数。

对于这个函数有这样两句话:

Vue.nextTick(callback),当数据发生变化,更新后执行回调。 Vue.$nextTick(callback),当dom发生变化,更新后执行的回调。

我测试了很多例子,最后还是只实现了dom的变化,对于第一句没有实现:

<p id="msg">{{msg}}</p>
<button @click="add">加</button>
add(){
  this.msg = 'have';
  console.log(document.getElementById('msg').innerHTML);
  this.$nextTick(() => {
      console.log(document.getElementById('msg').innerHTML);
  });
}

第一个输出no,在nextTick函数里面输出have。

这个函数就是有了数据之后,渲染完成之后会执行,也就是说当你需要数据先渲染,然后去操作渲染完成之后的dom,要把操作dom的逻辑写在这个函数里面。

最后分享两个术语:macro-task和micro-task,也就是主线程和能产生子线程的函数。

macro-task:script(script标签里面的整体代码) setTimeout、setInterval、setImmediate、I/O、UI rendering。 micro-task:process.nextTick,Promise,MutationObserver。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-01

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 重新认识原型和原型链二

    知道了prototype这个原型(也叫原型属性、原型对象,不要搞混了,原型、原型属性、原型对象都是同一个东西),我们还需要知道__proto__和constru...

    wade
  • 重新认识原型和原型链三

    知道了显式原型prototype和隐式原型__proto__,我们就能很好的知道原型链是什么东西了。

    wade
  • 前端缓存之HTTP缓存

    说真的,当自己还很小白的时候,明明修改了JS的内容了,但是就是没有加载成功,那时候感觉好神奇,好没道理。后来知道了这是因为缓存的原因。

    wade
  • iOS OC你了解的锁有哪些

    synchronized是互斥锁,在这里主要考虑的是线程安全的问题,使用这个关键字,可以将一段代码限制在一个线程内使用,如果有一个线程正在使用这块资源,那么别的...

    赵哥窟
  • SQL优化案例-正确的使用索引(二)

    下面sql 30秒执行出结果,查看sql谓词中有like,我们知道谓词中有这样的语句是不走索引的(为了保护客户的隐私,表名和部分列已经重命名)。

    沃趣科技
  • iOS多线程下的数据安全

    在多线程操作过程中,如何保护共享数据,其实已经是一个众所周知的事情了,这里总结下自己试过的处理方法:

    赵哥窟
  • python笔记10-多线程之线程同步(锁lock)

    前言 关于吃火锅的场景,小伙伴并不陌生,吃火锅的时候a同学往锅里下鱼丸,b同学同时去吃掉鱼丸,有可能会导致吃到生的鱼丸。 为了避免这种情况,在下鱼丸的过程中,先...

    上海-悠悠
  • 7.python3实用编程技巧进阶(二)

    zhang_derek
  • FFmpeg封装格式处理2-解复用例程

    本例实现,将输入文件中的视频流和音频流分离出来,保存为单独的文件,所保存的文件是不含封装格式的裸流文件。

    用户4940323
  • SPSS Modeler 介绍决策树

    本文将通过 SPSS Modeler 介绍决策树 (Decision tree) 演算法于银行行销领域的应用实例。通过使用网路公开电销资料建立不同决策树模型,分...

    学到老

扫码关注云+社区

领取腾讯云代金券