Vue 인스턴스/컴포넌트가 MVVM의 View Model만 됩니까?
Vue Docs:
Vue.js에서는 모든 Vue 인스턴스가 ViewModel입니다.
MVC, MVP, MVVM 등 디자인 패턴에 대한 기사를 많이 읽고 조금 혼란스럽습니다.
Vue 인스턴스 또는 Vue 컴포넌트(Vue 인스턴스이기도 함)에는<template>
HTML 기반 구문을 사용합니다.MVVM의 View가 아닌 부품입니까?
그리고 거기엔data()
,computed
Vue 컴포넌트에 있습니다.MVVM의 모델이 아닌가요?
Vue SFC의 구조는 Model, View 및 View Model로 나뉩니다.만약 그것에 무슨 문제가 있다면.이를 수정하고 MVVM 기반의 JavaScript-Framework를 사용하면서 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에 사용)도 모델에 속합니다.왜냐하면 그것은 거의 모든 비즈니스 로직을 포함하고 있고 다른 API나 사용자로부터 얻은 데이터를 혼자 저장하기 때문입니다.
즉, 읽을 때 프레임워크는 MVVM, MVC 또는 MVW(Angular는 다음과 같이 말합니다)를 기반으로 합니다.모델 뷰)를 선택합니다.실제 웹 개발에 있어서 이것이 실제로 무엇을 의미하고 중요한가?
개인적으로 기본적인 vue 인스턴스의 경우 디자인 패턴을 자세히 읽어서는 안 된다고 생각합니다.
여러 vuex 상태 모듈과 api 계층이 포함된 큰 vue 애플리케이션을 빌드할 때디자인 패턴을 생각할 수 있습니다.하지만 vue 웹 어플리케이션에서는 여전히 사소한 일이라고 생각합니다.답변에 대해서는, 이하를 참조해 주세요(잘못이 있으면 정정해 주세요).
템플릿 - 표시
데이터 및 vuex 스토어 상태 - 모델
getters & computed - View Model
액션 & apiLayer - ViewController
돌연변이 - View Controller -> View Model
viewController - 뷰가 모델에 쓰는 액션을 실행하는 경우.백엔드로 데이터 가져오기를 시작하고 가져온 데이터로 모델을 채우는 것과 같습니다.
언급URL : https://stackoverflow.com/questions/53723179/is-the-vue-instance-component-only-the-viewmodel-in-the-mvvm
'programing' 카테고리의 다른 글
vuej를 사용한 다른 모바일 및 데스크톱 레이아웃 (0) | 2022.08.31 |
---|---|
C에 선행 0이 있는 'printf' (0) | 2022.08.31 |
자바에서는 언제 Atomic Boolean을 사용해야 하나요? (0) | 2022.08.31 |
Vuetify 구성 요소에서 계산된 속성 및 Vuex와 함께 Vue v-model 바인딩을 사용하는 방법은 무엇입니까? (0) | 2022.08.30 |
C/C++의 엔드리스 루프 (0) | 2022.08.30 |