Vue响应式系统是如何运作的详细解析？

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

目录 + Vue响应式系统的基本原理

1.回顾Object.defineProperty的用法

1. 使用Object.defineProperty对person的age属性进行监听

2.数据代理

3.Vue中实现响应式思路

1. Vue中的数据代理

目录

• vue响应式系统的基本原理
• 1.回顾一下Object.defineProperty的用法
• 2.实战1：使用 Object.defineProperty 对 person的age属性 进行监听
• 3.数据代理
• 4.vue中实现响应式思路
• 总结
• 1.Vue中的数据代理：
• 2.Vue中数据代理的好处：
• 3.基本原理：
• 4.vue中实现响应式思路

vue响应式系统的基本原理

我们使用vue时，对数据进行操作，就能影响对应的视图。那么这种机制是怎么实现的呢？

思考一下，是不是就好像我们对数据的操作 被“某人”监视了？一旦我们对数据进行了更改，“某人”就能感应到，并帮我们更新视图

那么这个“某人”到底是谁呢？其实它很普通，就是我们基础里面有学过的 Object.defineProperty，使用它来对数据进行一下加工，就能实现当数据被读时，执行“读”的回调函数；数据被写时，执行“写”的回调函数。