当前位置：首页 > VUE

vue实现mvc

2026-01-07 07:25:37VUE

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>