Vue响应式原理及其实现方式如何深入理解？

本文共计2133个文字，预计阅读时间需要9分钟。

目录 + Vue的响应式 + Vue2的响应式原理 + Vue3的响应式原理 + 深入理解响应式 + 1. 数据初始化 + 2. 对象的数据响应 + Vue的响应式原理 + 使用Vue这个框架的人应该都知道，数据驱动是Vue的核心，数据双向绑定是关键。

目录

• Vue的响应式
• Vue2的响应式原理
• Vue3的响应式原理
• 深入理解响应式
• 1.数据初始化
• 2.对象的数据劫持

Vue的响应式

用过Vue这个框架的人应该都知道，数据驱动是Vue框架的核心，数据双向绑定是它的一大特色，根据官方的解释，我们可以比较清晰地去知道响应式的简单原理。

Vue2的响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。