vue源码学习一:Observer源码解析
2018-11-02 15:11
183 查看
通过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更新数据。
相关文章推荐
- Vue源码学习之初始化模块init.js解析
- Vue.js 源码学习七 —— template 解析过程学习
- Vue.js 源码学习八 —— HTML解析细节学习
- vue如何实现observer和watcher源码解析
- Vue源码学习(一)———数据双向绑定 Observer
- [学习总结]7、Android AsyncTask完全解析,带你从源码的角度彻底理解
- java基础学习总结——String类源码解析
- Jsoup学习笔记4:Jsoup 解析Html源码实例
- Android FM模块学习之四源码解析(三)
- Android源码学习之六——ActivityManager框架解析
- vue源码学习之Object.defineProperty 对数组监听
- Android源码解析之进程间通信(IPC)机制Binder解构简析和学习计划
- vuex 源码解析
- Spring源码学习-含有通配符路径解析(上) 推荐
- vue源码解析阅读列表
- ibatis源码学习2_初始化和配置文件解析
- Android源码学习之六——ActivityManager框架解析
- Android源码学习之六——ActivityManager框架解析
- 深度学习框架Caffe源码解析
- 深度学习框架Caffe源码解析