介绍
observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。
注意:本文是针对Vue@2.1.8进行分析
observer模块在Vue项目中的代码位置是src/core/observer,模块共分为这几个部分:
- Observer: 数据的观察者,让数据对象的读写操作都处于自己的监管之下
- Watcher: 数据的订阅者,数据的变化会通知到Watcher,然后由Watcher进行相应的操作,例如更新视图
- Dep: Observer与Watcher的纽带,当数据变化时,会被Observer观察到,然后由Dep通知到Watcher
示意图如下:
Observer
Observer类定义在src/core/observer/index.js中,先来看一下Observer的构造函数
constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 def(value, '__ob__', this) if (Array.isArray(value)) { const augment = hasProto "text-align: center">Dep
Dep是Observer与Watcher之间的纽带,也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep,当Observer观察的数据发生变化时,通过Dep通知各个已经订阅的Watcher。
Dep提供了几个接口:
- addSub: 接收的参数为Watcher实例,并把Watcher实例存入记录依赖的数组中
- removeSub: 与addSub对应,作用是将Watcher实例从记录依赖的数组中移除
- depend: Dep.target上存放这当前需要操作的Watcher实例,调用depend会调用该Watcher实例的addDep方法,addDep的功能可以看下面对Watcher的介绍
- notify: 通知依赖数组中所有的watcher进行更新操作
Watcher
Watcher是用来订阅数据的变化的并执行相应操作(例如更新视图)的。Watcher的构造器函数定义如下:
constructor (vm, expOrFn, cb, options) { this.vm = vm vm._watchers.push(this) // options if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = !!options.lazy this.sync = !!options.sync } else { this.deep = this.user = this.lazy = this.sync = false } this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy // for lazy watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.expression = process.env.NODE_ENV !== 'production' "${expOrFn}" ` + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ) } } this.value = this.lazy "color: #ff0000">Array methods
在src/core/observer/array.js中,Vue框架对数组的push、pop、shift、unshift、sort、splice、reverse方法进行了改造,在调用数组的这些方法时,自动触发dep.notify(),解决了调用这些函数改变数组后无法触发更新的问题。
在Vue的官方文档中对这个也有说明:http://cn.vuejs.org/v2/guide/list.html#变异方法
总结
以上就是这篇文中的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]