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 让前端代码构造更加清晰，简化了大量反复代码的编写，进步了代码的可维护性。