美文网首页
为什么Vue采用异步渲染呢?

为什么Vue采用异步渲染呢?

作者: 懒懒猫 | 来源:发表于2022-08-16 14:42 被阅读0次

Vue 是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能, Vue 会在本轮数据更新后,在异步更新视图。这也是nextTick 产生的原因。异步渲染核心思想是 nextTick 。

作用:

nextTick 接收一个回调函数作为参数,并将这个回调函数延迟到DOM更新后才执行,减少操作DOM的次数,;
使用场景:想要操作 基于最新数据生成的DOM 时,就将这个操作放在 nextTick 的回调中;

实现原理

将传入的回调函数包装成异步任务,异步任务又分微任务和宏任务(setTimeout、promise那些),定义了一个异步方法,多次调用nextTick会将方法存入队列,通过异步方法清空当前队列。

相关文章

  • 为什么Vue采用异步渲染呢?

    Vue 是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能, Vue 会在...

  • vue 为何采用异步渲染

    理解:如果不采取异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,再...

  • 4.vue 为何采用异步渲染

    理解: 如果不采取异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,...

  • vue异步渲染

    vue是组件级更新,当数据更改一次组件就要重新渲染一次,性能不高,为了防止数据一更新就更新组件,所以做了个异步更新...

  • 2018-07-15 Vue源码解析阅读笔记

    Vue的异步组件 异步组件实现的本质是 2 次渲染,除了 0 delay 的高级异步组件第一次直接渲染成 load...

  • vue综合讲解

    vue2.0和1.0模板渲染的区别 Vue 2.0 中模板渲染与 Vue 1.0 完全不同,1.0 中采用的 Do...

  • vue父子组件传参(异步请求数据)

    vue父子组件传参采用props方式 异步请求数据采用watch监听数据的更改

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

    当动态渲染页面时,如何判断页面的DOM节点已经渲染完成? vue 有一个重要的概念:异步更新队列。Vue在观察到数...

  • 异步渲染1

    异步渲染优化篇章 一.为什么需要异步渲染,异步渲染有什么好处?? 我们添加到项目或从服务端获取的图片格式基本上都为...

  • vue 代码分离和懒加载

    基础概念 异步组件 vue.js允许将组件定义为一个工厂函数,异步的解析组件的定义。vue.js只在组件需要渲染时...

网友评论

      本文标题:为什么Vue采用异步渲染呢?

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