MVVM深入理解---小白速会
简单来说 MVVM 是一种将数据和视图关联的模式,是利用数据劫持结合发布订阅模式当数据变化时就更新视图。具体用到了compile(编译模板)、observe(数据劫持)、watcher(观察者)、Dep(发布订阅)
这里需要特别解释一下数据劫持和发布订阅模式:
- 数据劫持(observe):就是利用 Object.defineProperty 将data数据全都转化为 getter 和 setter 的钩子函数,以方便后续对数据做处理
- 发布订阅模式(Dep):发布订阅是对于watcher的收集管理。将数据的watcher维护成一个数组,当数据变化的时候逐个去调数组里的watcher更新数据的方法。
具体各个模块的行为表现如下:
- compile:就是用来编译模板的,就是将模板上的 {{}} 或者指令(v-model...)绑定的值去data里找到之后,将值赋值给value或者插入到文本中。这里更新视图的地方会提前加一个监控watcher,数据变化了,就去跟新视图。
- observe:将data上绑定的值利用 Object.defineProperty()来重写数据,给数据添加各自的 get、set方法,以方便后续在获取值的时候、设置值的时候都能加自己想做的处理;在get的时候,将数据的观察者加入到发布订阅的数组中去,在set的时候通知所有的观察者,去调更新的方法,而去更新模版。
- watcher:观察者的目的就是给需要变化的那个元素({{}}或者带有指令的元素)增加一个观察者,当数据变化后,执行对应的处理方法, 这里的处理方法的作用其实就是再次调用compile中更新视图的方法。