# Vue.js的MVVM模式

开头先放出这张大家看过很多遍的图。简单理解就是:在模板(Model)上绑定JavaScript对象(数据),当视图层(View)发生改变,VM层会监听视图层的变化并通知Model数据更新,数据更新后再通过VM层通知View层发生改变。View层和Model层并不能直接通信,两者得到了最大限度的分离。

具体执行过程看这张图:

# Vue.js的MVVM模式

  1. 实现一个Obverse数据监听器,监听所有节点数据对象的属性,如果检测到发生变化便通知Dep(订阅者)

  2. 实现一个Compile模板编译类,对每个节点进行解析编译,根据要求更新数据,以及绑定更新函数

  3. 实现一个Watcher,是联系监听器和编译类的桥梁,能够订阅并收到每个属性的变化,执行指令绑定更新函数,让视图发生变化。

    在Vue中采用的是数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()对各个属性的setter,getter进行劫持,在数据变动时发布信息给订阅者,触发相应的回调函数。

    然而,最近尤大大发布的更新后Vue3.0改变成用Proxy来实现双向绑定,简单点来说就是在目标对象上加了一层拦截,代理的是对象而不是对象的属性。具体的将在后续的博客中展开叙述。

和MVC模式的比较

  • MVVM是MVC的改进版,但不是VM完全取代了C,ViewModel 存在目的 在于抽离 Controller 中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在 Controller 中实现。也就是说MVVM实现的是业务逻辑组件的重用。
  • 降低了代码的耦合性,View层可以独立于Model变化和改变,一个ViewModel可以绑定到不同的“View”上。
  • MVC是单向通信,要通过Controller来进行“承上启下”。

分类:

技术点:

相关文章: