VUE中的MVVM设计分析
MVVM简介
背景分析
早期的前端开发，将页面构成分为三个部分
- html用于定义网页结构，呈现网页内容
- css为页面元素添加相关样式
- js为页面添加交互行为
在这种结构下，HTML和CSS不支持变量、分支、循环等程序结构，任何变动都需要依赖JS来实现。这就导致JS中存在大量重复的步骤和编码。
MVVM设计概述
MVVM是一种设计思想，对早期的前端开发结构做了增强，将前端代码按其职责不同分成了三部分：
- 界面（View）：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
- 模型（Model）：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
- 视图模型（ViewModel）：负责自动维护模型对象中的变量，与界面中的变量同步。
因为有了ViewModel的存在，数据可以自动同步到界面，几乎避免大量重复代码。
vue中的MVVM实现
设计分析
MVVM在Vue中的设计，如下图所示：
代码实践分析
通过代码对上面????设计分析实现过程进行分析：
总结
MVVM使前端代码结构更加清晰，简化了大量重复代码的编写，提高了代码的可维护性。