Vue Instance / Component 只是 MVVM 中的 ViewModel 吗？

Question

来自Vue Docs：

在 Vue.js 中，每个 Vue 实例都是一个 ViewModel。

在阅读了很多关于 MVC、MVP 和 MVVM 等设计模式的文章后，我对此有点困惑。

我们都知道，在 Vue 实例或 Vue 组件（也是 Vue 实例）中，我们有<template>, 使用基于 HTML 的语法。这部分不是 MVVM 中的视图吗？

并且有data(),computed在 Vue 组件中。它们不是 MVVM 中的模型吗？

下面是一个Vue SFC的结构，我把它分为Model、View和ViewModel。如果它有什么问题。请帮助我纠正这个问题，并帮助我在使用基于 MVVM 的 JavaScript 框架时更多地理解 MVVM。

<template>
    <!-- the template part should be the View in MVVM since they don't contain any business logic but only the UI components. Which perfectly match the description of the View in MVVM.-->
</template>
<script>
export default = {
    data () {
        return {
            // the data should be the Model in MVVM, because they stand for their own and are the "actually" content of the app
        }
    },
    computed: {
        // computed properties should also be the Model in MVVM. When using vuex, I can, for example, get data with HTTP GET request through the vuex actions and parse the data, store it in the vuex store. When I need to use them, I get them from the computed in any child component I would like to.
    },
    methods: {
        // this should belong to the ViewModel in MVVM.
    }
}
</script>
<style scoped>
/* the style should be the View in MVVM. Because they are only responsible for how to present the data to the user.*/
</style>

因此，我认为store.js（用于 vuex 作为集中状态管理）也属于 Model。因为它包含了几乎所有的业务逻辑，并且保存了我们从其他 API 或用户自己获取的数据。

所以毕竟，当我们阅读时，一个框架是基于 MVVM 或 MVC 或 MVW（Angular 说的：模型视图无论如何）。它的真正含义是什么，它甚至对实际的 Web 开发很重要吗？

Answer 1

我个人认为对于基本的 vue 实例，您不应该真正深入阅读设计模式。

在构建大型 vue 应用程序时，涉及多个 vuex 状态模块和 api 层。你可以考虑设计模式。但是我觉得对于vue web应用来说还是微不足道的。请参阅下面有关某种答案的信息（如果我错了，请纠正我）。

模板-查看

数据和vuex 存储状态-模型

吸气剂和计算- ViewModel

动作和apiLayer - ViewController

突变- ViewController -> ViewModel

viewController - 当视图执行操作时，它会写入模型。就像向后端启动数据提取并使用提取的数据填充模型。