vue2.0响应式原理

检测数据变化

  • 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
  • 每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
    data.png

执行DOM更新

  • Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在上一篇文章中,我们发现改了 data 中的数据之后,界面上相应部分也会自动发生变化,那么这就是响应式的。 为什么...
    yibuyisheng阅读 510评论 0 1
  • 几种双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基...
    Picidae阅读 5,642评论 2 4
  • vue框架 中最核心的就是 vue的响应式 ,通过对vue中data数据的变更实现页面效果的重新渲染。但在实际开发...
    郝小淞阅读 4,366评论 1 1
  • 序章 那是我第一次,盯着彩虹看了几个小时,下了几天雨之后,终于出现了彩虹,它很漂亮,七种颜色,所以每当有人问我喜欢...
    自信的人最帅阅读 202评论 0 2
  • 陇上秋来寒意重,庭前落木深深。关山瘦月望南云,长空雁断,有客抚冷琴。时节已是重阳日,西风烈烈销魂。朝夕冷雨又伤神,...
    巛微澜阅读 188评论 0 2