Vue Instance/Component 只是 MVVM 中的 ViewModel 吗? [英] Is the Vue Instance / Component only the ViewModel in the MVVM?
问题描述
来自 Vue 文档:
在 Vue.js 中，每个 Vue 实例都是一个 ViewModel.
In Vue.js, every Vue instance is a ViewModel.
在阅读了很多关于 MVC、MVP 和 MVVM 等设计模式的文章后，我对此有点困惑.
I am a little confused about that after reading so many articles on the design pattern like MVC, MVP, and MVVM.
我们都知道在 Vue 实例或 Vue 组件(也是 Vue 实例)中，我们有 ，它使用基于 HTML 的语法.这部分不是MVVM中的View吗?
We all know that in the Vue instance or Vue component (which is also a Vue instance), we have the <template>, which use HTML-based Syntax. Is the part not the View in MVVM?
并且Vue组件中有data()，computed.它们不是 MVVM 中的模型吗?
And there are data(), computed in Vue component. Are they not the Model in MVVM?
下面是一个Vue SFC的结构，我把它分为Model、View和ViewModel.如果它有什么问题.请帮助我纠正这个问题，并帮助我在使用基于 MVVM 的 JavaScript 框架时更多地理解 MVVM.
Below is the structure of a Vue SFC, which I divide into Model, View, and ViewModel. If there is anything wrong with it. Please help me to correct that and also help me understanding MVVM more while using an MVVM based JavaScript-Framework.
<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 或用户自己获取的数据.
And therefore, I think the store.js (used for vuex as a centralized state management) also belongs to the Model. Because it contains almost all of the business logic and saves the data we got from other API or from the user by itself.
所以毕竟，当我们阅读时，框架是基于 MVVM 或 MVC 或 MVW(Angular 说的:模型视图随便).它的真正含义是什么?它对实际的 Web 开发是否重要?
So after all, when we read, a framework is base on MVVM or MVC or MVW (which Angular says: Model View Whatever). What does it really mean and does it even matter for the actual web development?
推荐答案
我个人认为对于一个基本的 vue 实例，你不应该真正深入阅读设计模式.
I personally think for a basic vue instance you should't really read deep into design patterns.
构建大型vue应用时，涉及多个vuex状态模块和api层.你可以考虑设计模式.但是我觉得对于vue web应用来说还是微不足道的.请参阅下面有关某种答案的内容(如果我错了，请纠正我).
When building big vue application, which involves multiples vuex state module and api layer. You can think about design pattern. But I feel it is still trivial for vue web applications. See below regarding some sort of answer(If I am wrong please correct me).
模板 - 查看
数据 &vuex 商店状态 - 模型
吸气剂 &计算 - ViewModel
行动 &apiLayer - ViewController
mutations - ViewController -> ViewModel
viewController - 当视图执行操作时，会写入模型.就像向后端发起数据提取并用提取的数据填充模型.
viewController - When the view execute actions, which writes to the model. Like initiating a data fetch to the backend and populate the model with the fetched data.
这篇关于Vue Instance/Component 只是 MVVM 中的 ViewModel 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
