vue
Vue是采用数据劫持配合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的getter和setter,在数据发生变化的时候,发布消息给依赖手机器,去通知观察者,作出对应的回调函数去更新世图。MVVM作为绑定的入口,整合Observe,Compil和Watcher三者,通过Observe来监听model的变化
通过Compil来解析编译模版指令,最终利用Watcher搭起Observe和Compil之前的通信桥梁
从而达到数据变化 => 更新视图,视图交互变化(input) => 数据model变更的双向绑定效果
vue数据绑定
数据变化更新视图,视图变化更新数据
输入框内容变化,data中的数据同步变化view=》model
data中的数据变化,文本节点的内容同步变化 model =》view
设计思想:发布者、观察者模式
响应式处理整体过程为initState() => initData() => observe(),其中observe是响应式处理的入口,通过该方法为data对象转化为响应式对象,observe方法接收的是对象且该对象不是响应式时,会为该对象创建一个observe对象,会调用Observer类,Observer类中判断该value是数组还是对象,进行不同的处理
- 数组的响应化处理,是重写push,pop,sort等会修改原数组的方法,调用对应的notify.然后遍历数组中的成员,判断其类型决定是否调用observe方法
- 对象的响应化处理,会调用walk方法,遍历对象中的每个属性,调用defineReactive,
- defineReactive的核心是为每一个属性定义getter和setter,getter中收集依赖,setter中派发更新,即调用dep.notify。 dep.notify()会调用watcher的update()方法。如果该watcher未被处理,会被添加到queue队列中,并调用flushSchedulerQueue()方法,
该方法会触发对应的钩子函数以及调用watcher.run()更新视图。