当前位置：首页 > VUE

用vue实现mvc

2026-02-20 11:30:09VUE

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 组件构成，负责展示数据和用户界面：

用vue实现mvc

<!-- 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 入口文件中整合各层：

用vue实现mvc

// 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'])
  }
}