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使前端代码结构更加清晰，简化了大量重复代码的编写，提高了代码的可维护性。