簡體   English   中英

Vue實例/組件只是MVVM中的ViewModel嗎?

[英]Is the Vue Instance / Component only the ViewModel in the MVVM?

Vue Docs開始

在Vue.js中,每個Vue實例都是ViewModel。

在閱讀了很多關於MVC,MVP和MVVM等設計模式的文章后,我對此感到有些困惑。

我們都知道在Vue實例或Vue組件(也是Vue實例)中,我們有<template> ,它使用基於HTML的語法。 該部分不是MVVM中的View嗎?

並且有data() ,在Vue組件中computed 它們不是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說:Model View Whatever)。 它真正意味着什么,它對於實際的Web開發是否重要?

我個人認為,對於一個基本的vue實例,你不應該深入了解設計模式。

構建大vue應用程序時,涉及多個vuex狀態模塊和api層。 你可以考慮設計模式。 但我覺得vue web應用程序仍然是微不足道的。 請參閱下面的某些答案(如果我錯了請糾正我)。

模板 - 查看

datavuex store states - Model

getterscomputed - ViewModel

actionsapiLayer - ViewController

突變 - ViewController - > ViewModel

viewController - 當視圖執行操作時,寫入模型。 就像啟動數據提取到后端並使用獲取的數據填充模型一樣。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM