vue双向绑定类图
2018-01-09 11:44:56 75 举报vue双向绑定原理解析
作者其他创作
大纲/内容
依赖
data中每个字段都有一个Dep守护它
相互关联
每个指令会生成一个专用的watcher。watcher被触发时调用自身的回调更新DOM
MVVM
+ $options: Object+ _data: Object+ $compile: Compile instance
data字段值变化时触发它的Dep的notify方法，继而触发订阅该Dep的watchers的update方法去更新视图
Watcher
+ cb: Function+ vm: Vue instance+ expOrFn: Function+ depIds: Object+ getter: Function+ value: String
+ update(): void+ run(): void+ addDep(dep): void+ get(): value+ parseGetter(exp): Function
关联
Dep
+ id: Number+ subs: Array
+ addSub(sub): void+ depend(): void+ removeSub(sub): void+ notify(): void
让数据字段可观察
Dep与Watcher是发布订阅模式
Compile
+ $vm: Vue instance+ $el: Dom element+ $fragment: Document fragment
Observer
+ data: Object
编译模板，解析指令，做依赖收集
0 条评论
下一页
