ViewModel 和 DTO 是同样的东西吗？

[289396212]

还是说有什么区别呢，前后端分离的情况下呢？

[thinkershare]

不是，ViewModel 是给 Render 渲染提供的，主要是交换模型。
DTO 是为了数据传输提供的，所有层和层，不同进程直接交换数据的格式都可以叫 DTO, 但一般的 DTO 都是为了隔间领域模型，提供给外部程序调用应用逻辑的入口/出口参数。

[Leviathann]

model 是活的，data 是死的

[ZGame]

@thinkershare 一楼说的很挺好的,VM 的概念很多时候在客户端，老的那种风格的化像微软的 wpf mvvm, model-view-viewmodel, 那种往往伴随着 xml+code 比较冗余，新生代以 react,flutter ui,jetpack compose ,swift ui 为例 是 View=fn(State) , 这里 State 某种程度上能类似 VM ?

[thinkershare]

@ZGame ViewModel 是交互模型。MVVM 中的 VM 就是典型的 ViewModel, Vue/React/Angular 中的 State 也是典型的 ViewModel, 它们都是视图驱动的。完全是为了怎么方便渲染怎么来。
如果业务不是非常复杂，也不追求规范化，你完全可以将 Table Schema/Domain Model, DTO, ViewModel 使用一个，但是这样往往会因为各个模型的职责差异，逐渐在演化中变得不可维护。

[289396212]

@thinkershare 那和 react client 交互的那个是 viewmodel 还是 dto 呢？

[xiaohundun]

举个具体的例子的话我的理解是这样的：举例用户信息这个，如果是 viewmodel 是用来给前端渲染用的，所以它里面的关键信息比如手机号、身份证号可能不是脱敏的，用与管理系统中，如果是 DTO 的话，可能它里面就直接没有手机号、身份证，或者做了脱敏，用来跟第三方交换数据

[thinkershare]

@289396212 后端返回的 JSON 是典型的序列化的 dto. 很多时候前端页面的交互并没有那么复杂，就不需要在这个 API 的返回模型和页面的视图模型再添加一个中间转换层，但很多时候这之间是需要转换层的。而且这还涉及到你们后端网关是否承担了 BFF 层的职责，否则很多时候，前端调用后端 API 还要负责黏合后端的多个接口，返回组合后的结果，充当一个前端网关的职责。其实这些概念并没有那么明确的定义，只要有个基础概念就好了。
现在 Web 应用已经变得非常复杂，很多复杂的前端应用完全将后端那一套模型搬到了前端。这之间的区别变得越来越模糊。

[zjsxwc]

ViewModel 是 reactive 的，会随着用户交互自动跟着变化。
DTO 是静态的，不会变。

[AyaseEri]

DTO 对的是 MVVM 领域的 Model ，实际上 ViewModel 可能会把 Model 中的一些字段拆解成多个字段、加上控制界面元素显隐的 boolean 字段。