vue实现mvc
Vue 实现 MVC 模式
Vue 本身是一个基于 MVVM（Model-View-ViewModel）模式的框架，但可以通过调整架构来实现类似 MVC（Model-View-Controller）的模式。以下是具体实现方法：
分离 Model 层
Model 层负责数据管理和业务逻辑。可以通过 Vuex 或 Pinia 管理全局状态，或直接使用 JavaScript 类/对象封装数据逻辑。
// models/User.js
export class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
save() {
// API 调用或数据持久化逻辑
}
}分离 View 层
View 层由 Vue 组件构成，仅负责展示数据和用户交互，不包含复杂逻辑。
<!-- views/UserView.vue -->
<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
<button @click="onSave">Save</button>
</div>
</template>
<script>
export default {
props: ['user', 'onSave']
}
</script>实现 Controller 层
Controller 层协调 Model 和 View，通常由 Vue 的父组件或独立服务实现。
// controllers/UserController.js
import { User } from '../models/User';
export class UserController {
constructor(viewComponent) {
this.view = viewComponent;
this.user = new User('', '');
}
handleSave() {
this.user.save();
}
}整合 MVC 结构
在父组件或入口文件中整合三层结构：
<!-- App.vue -->
<template>
<UserView :user="controller.user" :onSave="controller.handleSave" />
</template>
<script>
import { UserController } from './controllers/UserController';
import UserView from './views/UserView.vue';
export default {
components: { UserView },
data() {
return {
controller: new UserController(this)
};
}
}
</script>注意事项
- Vue 的响应式系统会自动处理 View 和 Model 的绑定，无需手动同步
- 复杂场景建议结合 Vuex/Pinia 管理状态
- 对于表单等交互，可以直接用
v-model实现双向绑定 - 异步操作应放在 Model 或 Controller 层处理
这种实现方式虽然保留了 MVC 的分离思想，但仍利用了 Vue 的响应式特性，比传统 MVC 更简洁。
