上一讲主要介绍了数据劫持相关的概念，现在起我们正式进入到Vue的数据绑定原理，开始感受Vue源码的精妙
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
——《Vue官方文档》
先来看一个很简单的示例，他可能会让你更清除这个过程
<body> <div id="app"></div> <script> function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { console.log('读取name的值') return val }, set(newVal) { val = newVal document.getElementById('app').innerHTML = newVal } }) } const bar = { name: '' } defineReactive(bar, 'name', 'king') document.getElementById('app').innerHTML = bar.name </script> </body> 复制代码
这是一个简化版的过程，当重新设置属性值的时候更新视图，当然真正的更新视图并不会这么简单，这只是演示
看完了low版，再来看一下high版，先来看一下Vue这一部分的源码架构
我用了Github1s这个工具直接使用在线VScode的形式来看源码非常方便，用法也很简单直接在代码仓库的地址github.com/xxx的url中，将github改为github1s，然后按下回车即可
扯远了，回归正题
看完了架构，那么具体是怎么实现的，继续往下看，为了保持一致性，我的代码模块尽量跟源码保持一致
与数据观察相关的部分是defineReactive，observe和Observer这三部分，defineReactive前面已经说过了负责进行数据劫持，observe的作用其实起到了一个过滤作用，只劫持对象属性，那么不是对象的就要过滤掉，Observer负责真正的数据观察，observe过滤完之后，Observer就要对对象的属性进行观察，怎么观察呢？这就用到了defineReactive，当然如果是数组元素还有另外一套处理方式。
你会发现这三者之间形成了一种递归调用的关系
数据观察阶段所做事情就是对对象的每个属性进行数据劫持，包括子属性，是时候上代码了
先来看observe，主要功能就是过滤掉非对象的变量，代码也很简单
function observe(data) { if (typeof data !== 'object') return // 调用Observer new Observer(data) } 复制代码
紧跟着来看一下Observer，通过遍历对象属性来实现劫持
class Observer { constructor(value) { this.value = value this.walk() } walk() { // 遍历该对象，并进行数据劫持 Object.keys(this.value).forEach((key) => defineReactive(this.value, key)) } } 复制代码
那么下面需要对上面的defineReactive稍加改造，使这三者形成递归
function defineReactive(data, key, value) { if(value===undefined) { value = data.key } // 如果value是对象，递归调用observe来监测该对象 // 如果value不是对象，observe函数会直接返回 observe(value) Object.defineProperty(data, key, { get() { return value }, set(newValue) { if (newValue === value) return value = newValue observe(newValue) // 设置的新值也要被监听 } }) } 复制代码
现在为止，我们已经完成了对对象的属性以及对象子对象的数据观察，那么还有一类数据——数组还没有进行处理，那么下一节我们将会介绍Vue中对于数组的处理办法
