Vue—响应式原理

目录

一、概述

二、追踪变化

三、变化检测

四、声明响应式属性

五、异步更新队列

---

一、概述

Vue最显著的特性之一便是不太引人注意的响应式系统。模型层model只是普通js对象，修改它可以直接更新视图view，这让状态管理变得非常简单且直观。本文将详细介绍Vue响应式系统的底层细节。

二、追踪变化

把一个普通JS对象传递给Vue实例的data选项，Vue将遍历此对象的所有属性，并使用Object.defineProperty把这些属性全部转换为getter/setter。Object.defineProperty只被es5支持，这就是为什么Vue不支持ie8及以下版本浏览器的原因。

用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。