vue2.0中 MVVM的基本原理
施工中...
双向绑定的实现方法
angular中使用的是脏值检查,即在各种事件触发时对比旧值与新值的差别.
vue中使用的是数据劫持,结合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的getter/setter,在数据变动时发布消息给订阅者,触发监听回调.
- 初始化,将所有数据(Data),逐层递归遍历变成若干相同名字的setter/getter, 然后将这些属性制作成与其一一对应的监听者(Watcher),并存放在一个订阅(Dep)对象的一个数组中.
- 通过编译器(Compile)将DOM标记数据要显示的地方,替换成数据(Data)现在的值,渲染成为一个带数据的html.
- 一旦数值变化,将触发一个观察者(Observer)对象,此对象去执行订阅(Dep),在此对象存放若干监听者(Watcher)的数组中,找到符合变化值的watcher去操作对应的update方法,通过执行在编译器(Compile)提前布置好的回调函数,再次渲染DOM