您的位置:首页 > Web前端 > Vue.js

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

2018-11-02 15:11 183 查看

通过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更新数据。


阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: