MVVM的核心

Vue是一个MVVM的框架,所有的MVVM框架都有很强的相似性,对于他们来说,实际上都有三个十分重要的特点:
(对应到Vue和React的时候,实现上会有一些差别,但是原理上是一样的)

  • 数据到视图的映射:模版+数据经过编译成虚拟DOM,经过渲染变成真实DOM
    • 我们写的是模版(template或jsx),处理的是数据,真正到去运行的时候,会变成页面上的真实DOM节点
  • 响应式:数据的变化会触发新的流程
  • Diff算法:比较,用最节省的方式更新真实DOm

image.png

MVVM是什么

image.png

  • View是视图层,也就是用户界面。前端主要由HTML和CSS来构成,为了更方便地展现ViewModel或者Model层的数据。
  • Model是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
  • ViewModel由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者从后端获取得到Model数据进行转换出来,做二次封装,以生成符合View层使用预期的视图数据模型。视图状态和行为都封装在ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。