AI
推荐
模板社区
专题
登录
免费注册
首页
流程图
详情
vue双向绑定类图
2018-01-09 11:44:56
75
举报
分享方式
免费使用
vue双向绑定原理解析
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
编译模板，解析指令，做依赖收集
收藏
立即使用
vuex应用概览图
收藏
立即使用
vuex类图
收藏
立即使用
mobx实现原理
收藏
立即使用
React源码类图
cold_light
职业：前端工程师
去主页
Collect
Get Started
绑定流程
Collect
Get Started
数据的双向同步
Collect
Get Started
vue执行流程及双向绑定
Collect
Get Started
类图
评论
0
条评论
下一页
Document
