用vue实现mvc
Vue 实现 MVC 模式
Vue.js 本身是一个基于 MVVM（Model-View-ViewModel）模式的框架，但可以通过适当的设计实现 MVC（Model-View-Controller）模式。以下是具体实现方法：
模型（Model）层实现
模型层负责数据管理和业务逻辑。在 Vue 中可以通过独立的 JavaScript 类或模块实现：
// models/TodoModel.js
class TodoModel {
constructor() {
this.todos = []
}
addTodo(text) {
this.todos.push({ id: Date.now(), text, completed: false })
}
toggleTodo(id) {
const todo = this.todos.find(t => t.id === id)
if (todo) todo.completed = !todo.completed
}
}
export default TodoModel视图（View）层实现
视图层由 Vue 组件构成，负责展示数据和用户界面：
<!-- views/TodoView.vue -->
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo">
<ul>
<li v-for="todo in todos" :key="todo.id"
@click="toggleTodo(todo.id)"
:class="{ completed: todo.completed }">
{{ todo.text }}
</li>
</ul>
</div>
</template>控制器（Controller）层实现
控制器作为模型和视图之间的桥梁，在 Vue 中可以通过组件方法或独立控制器类实现：
// controllers/TodoController.js
class TodoController {
constructor(model, view) {
this.model = model
this.view = view
// 绑定视图事件
this.view.methods = {
addTodo: this.addTodo.bind(this),
toggleTodo: this.toggleTodo.bind(this)
}
}
addTodo() {
this.model.addTodo(this.view.newTodo)
this.view.newTodo = ''
}
toggleTodo(id) {
this.model.toggleTodo(id)
}
}
export default TodoController整合 MVC 各层
在 Vue 入口文件中整合各层：
// main.js
import Vue from 'vue'
import TodoModel from './models/TodoModel'
import TodoView from './views/TodoView.vue'
import TodoController from './controllers/TodoController'
const model = new TodoModel()
const view = new Vue({
el: '#app',
render: h => h(TodoView),
data: {
newTodo: '',
todos: model.todos
}
})
new TodoController(model, view)替代方案：使用 Vuex 实现 MVC
对于复杂应用，可以使用 Vuex 作为模型层：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: []
},
mutations: {
ADD_TODO(state, todo) {
state.todos.push(todo)
},
TOGGLE_TODO(state, id) {
const todo = state.todos.find(t => t.id === id)
if (todo) todo.completed = !todo.completed
}
},
actions: {
addTodo({ commit }, text) {
commit('ADD_TODO', { id: Date.now(), text, completed: false })
},
toggleTodo({ commit }, id) {
commit('TOGGLE_TODO', id)
}
}
})组件中通过映射 Vuex 来实现控制器功能：
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['todos'])
},
methods: {
...mapActions(['addTodo', 'toggleTodo'])
}
}关键注意事项
- 保持单向数据流：数据从模型流向视图，用户交互通过控制器更新模型
- 避免在视图中直接修改模型数据
- 控制器应尽可能薄，只负责协调而非业务逻辑
- 对于简单应用，可以合并控制器和模型层
这种实现方式结合了 Vue 的响应式特性和 MVC 的清晰分离，适用于需要严格分层的中大型应用。
