开发者社区> 问答> 正文

既然Vue通过数据劫持可精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?

既然Vue通过数据劫持可精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?


【精品问答】前端面试手册

【精品问答】前端面试手册之Vue篇

展开
收起
前端问答 2019-11-25 10:03:21 1897 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

    现代前端框架有两种⽅式侦测变化,⼀种是pull⼀种是push

    pull: 其代表为React,我们可以回忆⼀下React是如何侦测到变化的,我们通常会⽤ setState API显式更新,然后React会进⾏⼀层层的Virtual Dom Diff操作找出差异,然后Patch到DOM上,React从⼀开始就不知道到底是哪发⽣了变化,只是知道「有变化了」,然后再进⾏⽐较暴⼒的Diff操作查找「哪发⽣变化了」,另外⼀个代表就是Angular的脏检查操作。

    push: Vue的响应式系统则是push的代表,当Vue程序初始化的时候就会对数据data进⾏依赖的收集,⼀但数据发⽣变化,响应式系统就会⽴刻得知,因此Vue是⼀开始就知道是「在哪发⽣变化了」,但是这⼜会产⽣⼀个问题,如果你熟悉Vue的响应式系统就知道,通常⼀个绑定⼀个数据就需要⼀个Watcher,⼀但我们的绑定细粒度过⾼就会产⽣⼤量的Watcher,这会带来内存以及依赖追踪的开销,⽽细粒度过低会⽆法精准侦测变化,因此Vue的设计是选择中等细粒度的⽅案,在组件级别进⾏push侦测的⽅式,也就是那套响应式系统,通常我们会第⼀时间侦测到发⽣变化的组件,然后在组件内部进⾏VirtualDom Diff获取更加具体的差异,⽽Virtual Dom Diff则是pull操作,Vue是push+pull结合的⽅式进⾏变化侦测的.

    2019-12-19 07:50:59
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载
Vue.js在前端服务化上的实践与探索 立即下载