简议前端为什么要有MVVM模式

在做微信小程序开发的时候，看到一句话，对我有所启示。

大概的意思是，为什么微信的HTML语法，即WXML里充斥着很多wx:if这样的属性以及两对花括号这样的表达式。启示不光是微信开发，很多JS框架，早期的像KnockoutJS，包括现在的VueJS都有很多类似的写法，在HTML里有很多特有的属性和语法。这么做是为什么呢？

最早我们开发网站时，会选择jQuery来操作DOM，以引起界面的变化响应用户的行为。当项目越来越大的时候，代码里充斥着非常多的界面交互逻辑和程序的各种状态变量，项目变得越来越难以维护。有时候，比方说给表格加个列，会引起一大片的修改，因为列号是写死的，牵一发而动全身。

这显然不是一个很好的开发模式，因此才会衍生出MVVM开发模式。MVVM模式的核心思想是把渲染和逻辑分离开来。简单来说就是不再让JS直接操控DOM，JS只需要管理状态即可，然后再通过模板语法来描述状态和界面结构的关系。这样就可以实现界面和逻辑的分离了。职责变得更明确了，这就是MVVM的好处。