vue源码学习一：Observer源码解析

通过vue在github上的源码分析一下，Observer在MVVM中实现劫持的原理，

Observer类：

先从框框第2部分开始分析：

从observerArray方法下钻可以看到调用到observe方法

从这里面可以看出，这是在做数据的递归，最后往下执行的是第3部分的walk方法，往下钻defineReactive方法，可以看到接下来开始核心了

这边通过了defineProperty给对象属性添加了set和get;Object.defineProperty的属性具体可以查看标准库：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

上面框图中，get方法为数据添加订阅者，但是get方法会执行很多次，那这样添加订阅者是否就有问题了呢，所以引入了target，看下图watcher中的get，是为了防止重复添加订阅者

 

而set方法，则是通过dep.notify通知调用update更新数据。