vue源码学习一:Observer源码解析
通过vue在github上的源码分析一下,Observer在MVVM中实现劫持的原理,
Observer类:
先从框框第2部分开始分析:
从observerArray方法下钻可以看到调用到observe方法
从这里面可以看出,这是在做数据的递归,最后往下执行的是第3部分的walk方法,往下钻defineReactive方法,可以看到接下来开始核心了
这边通过了defineProperty给对象属性添加了set和get;Object.defineProperty的属性具体可以查看标准库:
上面框图中,get方法为数据添加订阅者,但是get方法会执行很多次,那这样添加订阅者是否就有问题了呢,所以引入了target,看下图watcher中的get,是为了防止重复添加订阅者
而set方法,则是通过dep.notify通知调用update更新数据。