vue实现mvc
Vue 实现 MVC 模式
Vue 本身是一个 MVVM（Model-View-ViewModel）框架，但可以通过结构调整实现 MVC（Model-View-Controller）模式。以下是具体实现方式：
模型（Model）
模型层负责数据管理和业务逻辑。在 Vue 中，可以通过以下方式实现：
- 使用
data或Vuex管理应用状态 - 将业务逻辑封装在独立的 JavaScript 模块中
// models/User.js
export default class User {
constructor(name, email) {
this.name = name
this.email = email
}
save() {
// 保存逻辑
}
}视图（View）
视图层负责展示数据。Vue 的单文件组件（.vue 文件）天然适合作为视图层：
<!-- views/UserView.vue -->
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
</div>
</template>控制器（Controller）
控制器负责协调模型和视图。在 Vue 中可以通过以下方式实现：
- 使用组件方法作为控制器逻辑
- 创建独立的控制器类
// controllers/UserController.js
import User from '../models/User'
export default {
createUser(name, email) {
const user = new User(name, email)
user.save()
return user
}
}完整实现示例
模型定义
// models/Task.js
export default class Task {
constructor(title, completed = false) {
this.title = title
this.completed = completed
}
toggle() {
this.completed = !this.completed
}
}控制器实现
// controllers/TaskController.js
import Task from '../models/Task'
export default {
tasks: [],
addTask(title) {
const task = new Task(title)
this.tasks.push(task)
return task
},
deleteTask(index) {
this.tasks.splice(index, 1)
}
}视图组件
<!-- views/TaskView.vue -->
<template>
<div>
<input v-model="newTask" @keyup.enter="addTask">
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task.title }}
<button @click="deleteTask(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import TaskController from '../controllers/TaskController'
export default {
data() {
return {
newTask: '',
controller: TaskController
}
},
computed: {
tasks() {
return this.controller.tasks
}
},
methods: {
addTask() {
this.controller.addTask(this.newTask)
this.newTask = ''
},
deleteTask(index) {
this.controller.deleteTask(index)
}
}
}
</script>注意事项
- Vue 的响应式系统会自动处理视图更新，不需要手动操作 DOM
- 对于复杂应用，建议使用 Vuex 作为集中式状态管理
- 控制器可以进一步拆分为更细粒度的服务层
- 路由管理可以使用 Vue Router 实现导航控制
这种架构保持了 Vue 的响应式特性，同时实现了 MVC 的关注点分离。
