对 Vue 数据响应式的理解

什么是数据响应式

数据响应式是指，在改变数据的时候，视图也会跟着更新。

当修改 Vue 实例中的数据式，视图就会重新渲染，出现新的内容。这就是 Vue 的数据响应式。

Vue 是利用 Object.defineProperty 的方法里面的 getter 与 setter 方法的观察者模式来实现数据响应式的

官方解释

• 总结：

1. 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
2. Vue 的 data 上的属性会被添加 getter 和 setter 属性。
3. 当 Vue Component render 函数被执行的时候, data 上会被 触碰( touch ), 即被 读 , getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
4. data 被改动时（主要是用户操作）, 即被 写 , setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。

本文参考摘录了：

1. 最简化 VUE的响应式原理---daisy
2. 说说你对 Vue 数据响应式的理解---lanycsq
3. Vue 响应式原理白话版