MVVM 简介

背景剖析

在晚期的web前端开发中，咱们通常将页面形成分成三局部:

  • html 用于定义网页构造、出现网页内容。
  • css 为页面元素增加相干款式。
  • JS 为页面增加交互行为。

在这种开发构造中，因为HTML和CSS中不反对变量，不反对分支、循环等程序结构，任何一个中央的批改都须要依赖js来实现。导致js中存在大量反复的步骤和编码！

MVVM设计概述

MVVM是一种设计思维，对晚期的web前端开发做了加强，将前端代码按其职责的不同分成了三局部：

  • 界面(View)局部：由html+css形成，并容许在html,css中间接应用变量，表达式，语句等。
  • 模型局部(Model)：个别为一个JSON格局的对象，用于存储view中须要的数据和函数。
  • 视图模型(ViewModel):专门负责主动保护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据能够主动同步到界面上，简直防止了大量反复的编码！

VUE中的MVVM实现

设计剖析

MVVM在VUE前端框架中的设计，如图所示：

代码实际剖析

基于VUE中MVVM剖析，先对代码实现过程进行剖析，如图所示：

总结(Summary)

本大节解说了MVVM的设计，以及MVVM在VUE框架中的根本构造，总之MVVM让前端代码构造更加清晰，简化了大量反复代码的编写，进步了代码的可维护性。