构建可维护的复杂页面从来都不是简单的事情。
在Doric中我们推荐使用MVVM的方式构建复杂页面，通过轻量级的实现维护复杂的数据到视图的映射逻辑.

本文阐述了Doric中MVVM架构使用,并通过计数器Demo举例说明。

您可以通过线上Demo 快速查看本文源码及运行效果.

MVVM

数据驱动视图

例子:一个计数器

用MVVM的方式实现一个简单的计数器，点击后数字加一。
我们可以将代码按MVVM的方式实现:

定义状态模型 Model部分

创建视图 View部分

这一步,创建了计数器的视图结构,并持有关键的视图组件的引用,以待后续的更新.

关联视图与状态 ViewModel部分

在VM的onAttached中将点击事件设置为改变计数值,在onBind中将视图text属性设置为计数值,即将计数值与视图进行绑定.
onAttached只会在初始化时调用一次,以后每次updateState都会触发onBind回调.

通过VMPanel构建出完整的页面.

CounterPanel的getState方法返回的是状态初始值,核心逻辑通过VM及VH实现.