> For the complete documentation index, see [llms.txt](https://narro.gitbook.io/tinyts-handbook-cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://narro.gitbook.io/tinyts-handbook-cn/introduction.md).

# 视图模型

在开发web应用的时候，前端承担的工作一般更倾向于呈现，交互等。就是把数据以一种和谐优雅的方式呈现给用户，并且与用户取得交互。我相信html和css已经很好地为我们完成这样的工作——使一个web应用美观并且颇具结构性。但与此同时，web前端也存在着必不可少的业务逻辑，如何与用户优雅地交互就是传统的前端业务逻辑。近年来，随着PC以及移动设备处理器的不断升级，我们在开发很多web应用时，都会考虑将部分计算转移到前端来（对于一些不需要服务器数据的业务，放到前端计算可以大量减轻服务端的压力，从而提高服务器的负载能力和响应速度）。\
在tinyts中，传统的交互逻辑将在视图模型中实现。视图模型是tinyts的核心部分，我们在视图模型中实现了控件的依赖注入，大量减少了开发过程中进行DOM操作所需编写的代码。一个视图模型类在项目中承担的角色是托管一个模块的业务逻辑。在视图模型中，我们使用控件完成所有的业务逻辑以及用户交互，使用服务与后台进行数据交互，使用模型验证数据。\
而对于一些复杂的计算逻辑，在web前端将会更容易地实现，这得益于typescript面向对象的开发方式，可以大幅度分解运算逻辑。我们将在这章具体介绍视图模型，而熟悉面向对象的你，对逻辑实现并不担忧。\
在介绍视图模型之前，我们需要先介绍一个typescript的高级特性——装饰器。