来自Vue Docs
在Vue.js中,每个Vue实例都是一个ViewModel。
在阅读了许多关于设计模式的文章(如MVC、MVP和MVVM )之后,我对此感到有点困惑。
我们都知道,在Vue实例或Vue组件(也是Vue实例)中,我们有<template>,它使用基于HTML的语法。是MVVM?中的一部分而不是视图
在Vue组件中有data()、computed。--它们不是MVVM中的模型吗?
下面是Vue证监会的结构,我将其划分为Model、View和ViewModel。如果有什么问题的话。请帮助我纠正这一点,并帮助我更多地理解MVVM,同时使用基于MVVM的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作为集中式状态管理)也属于该模型。因为它包含了几乎所有的业务逻辑,并且保存了我们从其他API或用户获得的数据。
因此,毕竟,当我们阅读时,一个框架是基于MVVM或MVC或MVW (它的角度是:模型视图什么的)。,它真正意味着什么,它对实际的web开发有什么意义吗?
发布于 2018-12-11 14:17:19
我个人认为,对于一个基本的vue实例,您不应该深入了解设计模式。
在构建大型vue应用程序时,涉及多个vuex状态模块和api层。你可以考虑一下设计模式。但我觉得对于vue网络应用程序来说,这仍然是微不足道的。请看下面关于某种答案(如果我错了,请纠正我)。
模板-视图
数据& vuex存储状态-模型
getter&计算- ViewModel
actions & apiLayer - ViewController
突变- ViewController -> ViewModel
viewController -当视图执行操作时,该操作将写入模型。类似于启动数据获取到后端,并使用获取的数据填充模型。
https://stackoverflow.com/questions/53723179
复制相似问题