• $nextTick 原理及作用


    Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

    nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,

    本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。nextTick 不仅是 Vue 内部的异步队列的调用方法,同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理。

    nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例,引入异步更新队列机制的原因∶

    (1)如果是同步更新,则多次对一个或多个属性赋值,会频繁触发 UI/DOM 的渲染,可以减少一些无用渲染

    (2)同时由于 VirtualDOM 的引入,每一次状态发生变化后,状态变化的信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态后的渲染过程需要更多的计算,而这种无用功也将浪费更多的性能,所以异步渲染变得更加至关重要。Vue采用了数据驱动视图的思想,但是在一些情况下,仍然需要操作DOM。有时候,可能遇到这样的情况,DOM1的数据发生了变化,而DOM2需要从DOM1中获取数据,那这时就会发现DOM2的视图并没有更新,这时就需要用到了nextTick了。由于Vue的DOM操作是异步的,所以,在上面的情况中,就要将DOM2获取数据的操作写在$nextTick中。

    所以,在以下情况下,会用到n

  • 相关阅读:
    PDF怎么转图片?四种转换方法分享
    使用CUDA计算GPU的理论显存带宽
    【Proteus仿真】定时器0作为16位计数器使用示例
    Linux账户组管理及权限练习
    新建SpringCloud电商前端Vant项目
    【洛谷 P1591】阶乘数码 题解(模拟+高精度)
    强缓存和协商缓存
    计算机网络-计算机网络体系结构-应用层
    浏览器的安全问题
    4.后端·新建子模块与开发(传统模式)
  • 原文地址:https://blog.csdn.net/m0_38066007/article/details/138122541