hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • Vue 生命周期
  • v-model 的原理
  • Vue 组件间通信有哪几种方式
  • v-for给每一项加个key的作用
  • v-if与v-show的区别
  • computed 和 watch 的区别
  • 对 SPA 单页面的理解,它的优缺点分别是什么
  • 为什么不建议v-if和v-for一起使用
  • Vue的内置指令
  • MVVM的理解
  • keep-alive 的了解
  • Vue身上set方法的实现原理,为什么能实现视图的更新
  • mixin的用法
  • Vuex 为什么要分模块并且加命名空间
  • vue-router 路由钩子函数是什么 执行顺序是什么
  • Vuex 页面刷新数据丢失怎么解决
  • vue-router的hash和history模式
  • vue-router 路由模式有几种
  • vue-router 中常用的 hash 和 history 路由模式实现原理
  • 动态绑定Class和Style
  • 服务端渲染SSR
  • 对Diff算法的认识
  • 对虚拟DOM的认识
  • 在组件上使用v-model
  • 路由有哪几种导航守卫
  • 在哪个生命周期内调用异步请求
  • 怎么理解Vue中的单向数据流
  • 组件中 data 为什么是一个函数
  • 通过数组下标或者长度无法触发更新
  • 路由懒加载是什么意思
  • 父组件监听子组件的生命周期
  • 父子组件生命周期钩子函数执行顺序
  • Vue项目的SEO优化
  • Vue项目的优化
  • Vue2的响应式原理的基本实现
  • Vue2和Vue3的响应式原理的区别
  • axios简单配置
  • Vuex的使用
  • 相关面试题集合
  • 对函数式组件的认识
  • Vue extend 作用和原理
  • 自定义指令的使用
  • 模板编译的原理
  • Vue是怎样进行依赖收集的
  • Vue生命周期钩子是如何实现的
  • 说明nextTick的原理
  • 请描述组件的渲染流程
  • Vue的普通Slot以及作用域Slot的区别
  • Vue use方法的作用及原理
  • Vue中的修饰符
  • Vue如何兼容ie的问题
  • Vue中style标签的scoped的作用及原理
  • Vue路由传参数
  • Vue事件绑定原理
  • 如何设计一个比较友好的Header组件
  • Vue-router守卫
  • scoped样式穿透
  • Vue是如何重写数组的方法的
  • scoped的情况下无法修改element的样式问题
  • 修改element ui的样式
  • 强制刷新组件的方式有哪些
  • vue组件的设计原则
  • 一个组件的渲染流程
  • 默认插槽、具名插槽和作用域插槽
  • Vue组件的name的作用
  • 为什么Vue被称为“渐进框架”
  • 怎么做Vue项目的SEO优化
  • vue推荐的风格指南
  • 如何重置data
  • vuex中actions和mutations有什么区别
  • 说说你对vue的错误处理的了解
  • 说一说递归组件
  • 对于vue双向数据绑定的理解
  • 说一说vue中template模板的编译过程
  • 说一说nextTick的作用
  • Vue为何采用异步渲染
    • 异步渲染的原因
  • vue-router有几种钩子函数?具体是什么及执行流程是怎样的
  • vue中mixin各个选项的合并策略
  • vue中一个组件模板为什么只能由一个根元素
  • vue中的watch和created哪个先执行
  • vue中编辑页面如果判断是否编辑过并在离开时提示保存
  • vue修饰符sync的作用及原理
  • vue中如何批量引入组件
  • vue使用axios如何取消请求
  • vue项目如何实现国际化(多语言)
  • vue中定义全局方法有哪几种方式
  • 跟keep-alive组件相关的生命周期钩子有哪些
  • 如何响应路由参数变化
  • vue中父子组件生命周期的执行顺序
  • 内置组件keep-alive的实现原理
  • mixins和extends的使用及区别
  • vue自定义指令
  • vue的事件绑定原理
  • vue权限控制一般怎么做
  • vue的动态路由怎么配置使用
  • vuex数据持久化怎么做
  • Vue
guoguoqiqi
2022-03-08

Vue为何采用异步渲染

Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次,这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的,然后,在下一个的事件循环tick中,Vue刷新队列并执行实际(已去重的)工作,Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate,如果执行环境不支持,则会采用setTimeout(fn, 0)代替。

# 异步渲染的原因

对于Vue为何采用异步渲染,简单来说就是为了提升性能,因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图,举个例子,让我们在一个方法内重复更新一个值。

this.msg = 1;
this.msg = 2;
this.msg = 3;
1
2
3

事实上,我们真正想要的其实只是最后一次更新而已,也就是说前三次DOM更新都是可以省略的,我们只需要等所有状态都修改好了之后再进行渲染就可以减少一些性能损耗。

对于渲染方面的问题是很明确的,最终只渲染一次肯定比修改之后即渲染所耗费的性能少,在这里我们还需要考虑一下异步更新队列的相关问题,假设我们现在是进行了相关处理使得每次更新数据只进行一次真实DOM渲染,来让我们考虑异步更新队列的性能优化。

假设这里是同步更新队列,this.msg=1,大致会发生这些事: msg值更新 -> 触发setter -> 触发Watcher的update -> 重新调用 render -> 生成新的vdom \-> dom-diff \-> dom更新,这里的dom更新并不是渲染(即布局、绘制、合成等一系列步骤),而是更新内存中的DOM树结构,之后再运行this.msg=2,再重复上述步骤,之后的第3次更新同样会触发相同的流程,等开始渲染的时候,最新的DOM树中确实只会存在更新完成3,从这里来看,前2次对msg的操作以及Vue内部对它的处理都是无用的操作,可以进行优化处理。

如果是异步更新队列,会是下面的情况,运行this.msg=1,并不是立即进行上面的流程,而是将对msg有依赖的Watcher都保存在队列中,该队列可能这样[Watcher1, Watcher2...],当运行this.msg=2后,同样是将对msg有依赖的Watcher保存到队列中,Vue内部会做去重判断,这次操作后,可以认为队列数据没有发生变化,第3次更新也是上面的过程,当然,你不可能只对msg有操作,你可能对该组件中的另一个属性也有操作,比如this.otherMsg=othermessage,同样会把对otherMsg有依赖的Watcher添加到异步更新队列中,因为有重复判断操作,这个Watcher也只会在队列中存在一次,本次异步任务执行结束后,会进入下一个任务执行流程,其实就是遍历异步更新队列中的每一个Watcher,触发其update,然后进行重新调用render -> new vdom -> dom-diff -> dom更新等流程,但是这种方式和同步更新队列相比,不管操作多少次msg, Vue在内部只会进行一次重新调用真实更新流程,所以,对于异步更新队列不是节省了渲染成本,而是节省了Vue内部计算及DOM树操作的成本,不管采用哪种方式,渲染确实只有一次。

此外,组件内部实际使用VirtualDOM进行渲染,也就是说,组件内部其实是不关心哪个状态发生了变化,它只需要计算一次就可以得知哪些节点需要更新,也就是说,如果更改了N个状态,其实只需要发送一个信号就可以将DOM更新到最新,如果我们更新多个值。

this.msg = 1;
this.age = 2;
this.name = 3;
1
2
3

此处我们分三次修改了三种状态,但其实Vue只会渲染一次,因为VIrtualDOM只需要一次就可以将整个组件的DOM更新到最新,它根本不会关心这个更新的信号到底是从哪个具体的状态发出来的。

而为了达到这个目的,我们需要将渲染操作推迟到所有的状态都修改完成,为了做到这一点只需要将渲染操作推迟到本轮事件循环的最后或者下一轮事件循环,也就是说,只需要在本轮事件循环的最后,等前面更新状态的语句都执行完之后,执行一次渲染操作,它就可以无视前面各种更新状态的语法,无论前面写了多少条更新状态的语句,只在最后渲染一次就可以了。

将渲染推迟到本轮事件循环的最后执行渲染的时机会比推迟到下一轮快很多,所以Vue优先将渲染操作推迟到本轮事件循环的最后,如果执行环境不支持会降级到下一轮,Vue的变化侦测机制(setter)决定了它必然会在每次状态发生变化时都会发出渲染的信号,但Vue会在收到信号之后检查队列中是否已经存在这个任务,保证队列中不会有重复,如果队列中不存在则将渲染操作添加到队列中,之后通过异步的方式延迟执行队列中的所有渲染的操作并清空队列,当同一轮事件循环中反复修改状态时,并不会反复向队列中添加相同的渲染操作,所以我们在使用Vue时,修改状态后更新DOM都是异步的。

当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会立即去执行,在update中会调用queueWatcher方法将watcher放到了一个队列里,在queueWatcher会根据watcher的进行去重,若多个属性依赖一个watcher,则如果队列中没有该watcher就会将该watcher添加到队列中,然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行),然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列,flushSchedulerQueue中开始会触发一个before的方法,其实就是beforeUpdate,然后watcher.run()才开始真正执行watcher,执行完页面就渲染完成,更新完成后会调用updated钩子。

← 说一说nextTick的作用 vue-router有几种钩子函数?具体是什么及执行流程是怎样的→

最近更新
01
vuex数据持久化怎么做
05-22
02
vue的动态路由怎么配置使用
05-22
03
vue权限控制一般怎么做
05-22
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式