美文网首页
vue控制代码执行顺序之$nextTick()

vue控制代码执行顺序之$nextTick()

作者: 努力学习的小丸子 | 来源:发表于2020-02-26 13:58 被阅读0次

    当动态渲染页面时,如何判断页面的DOM节点已经渲染完成?

    vue 有一个重要的概念:异步更新队列。Vue在观察到数据时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。
    官网教程地址:https://cn.vuejs.org/v2/guide/reactivity.html
    如下:通过websocket方式接受了后端的数据,并在页面渲染了几个图标。如果要获取第一个图标,并将其颜色变蓝,如果不使用nextTick()方法,会报错:cannot read property style of null 。因为此时节点还没有渲染完成,通过ID去获取DOM节点获取到的是Null。当使用了nextTick()方法后,会等页面的DOM节点渲染完成后才执行其中的代码。使用$nextTick就是确保我们操作的是更新后的DOM。

    相关文章

      网友评论

          本文标题:vue控制代码执行顺序之$nextTick()

          本文链接:https://www.haomeiwen.com/subject/ygqvchtx.html