当前位置：首页 > VUE

vue实现mvc

2026-02-09 22:44:18VUE

Vue 实现 MVC 模式

Vue 本身是一个基于 MVVM（Model-View-ViewModel）模式的框架，但可以通过调整架构来实现类似 MVC（Model-View-Controller）的模式。以下是具体实现方法：

分离 Model 层

Model 层负责数据管理和业务逻辑。可以通过 Vuex 或 Pinia 管理全局状态，或直接使用 JavaScript 类/对象封装数据逻辑。

vue实现mvc

// models/User.js
export class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  save() {
    // API 调用或数据持久化逻辑
  }
}

分离 View 层

View 层由 Vue 组件构成，仅负责展示数据和用户交互，不包含复杂逻辑。

vue实现mvc

<!-- 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>