mvvm实现vue

MVVM 模式在 Vue 中的实现

MVVM（Model-View-ViewModel）是一种设计模式，Vue 框架天然支持 MVVM 模式。以下是 Vue 中实现 MVVM 的关键机制：

数据绑定（Model 与 View 的同步）

Vue 通过数据劫持和发布-订阅模式实现双向绑定：

// 数据层（Model）
const vm = new Vue({
  data: {
    message: 'Hello MVVM'
  }
})

// 视图层（View）
<div id="app">
  {{ message }} 
  <input v-model="message">
</div>

当 message 改变时，视图自动更新；反之用户修改输入框时，数据也会同步变更。

指令系统（View 与 ViewModel 的桥梁）

Vue 指令是特殊的 HTML 属性，实现视图与逻辑的绑定：

<div v-if="isVisible">控制显示</div>
<ul>
  <li v-for="item in list">{{ item.name }}</li>
</ul>
<button @click="handleClick">事件绑定</button>

计算属性和侦听器（ViewModel 逻辑）

ViewModel 包含业务逻辑和状态管理：

new Vue({
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    counter(newVal) {
      console.log('值变化:', newVal)
    }
  }
})

组件化（MVVM 的模块化实现）

Vue 组件是独立的 MVVM 单元：

Vue.component('user-card', {
  props: ['user'],  // 外部数据（Model）
  template: `       // 视图（View）
    <div class="card">
      <h2>{{ user.name }}</h2>
    </div>
  `,
  methods: {        // 逻辑（ViewModel）
    sendMessage() {
      // ...
    }
  }
})

响应式原理（底层实现）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据响应：

// 简化的响应式实现
function defineReactive(obj, key) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newVal) {
      value = newVal
      updateView() // 触发视图更新
    }
  })
}

生命周期钩子（ViewModel 控制流）

Vue 提供生命周期函数管理 MVVM 流程：

new Vue({
  created() {
    // 数据已初始化，DOM未生成
  },
  mounted() {
    // DOM已挂载
  },
  beforeUpdate() {
    // 数据变化前的钩子
  }
})

通过以上机制，Vue 实现了：

• Model：普通 JavaScript 对象
• View：模板/DOM 渲染
• ViewModel：Vue 实例处理绑定和逻辑