mvvm实现vue

MVVM 模式在 Vue 中的实现

MVVM（Model-View-ViewModel）是一种前端架构模式，Vue 的设计深受其影响。以下是 Vue 中实现 MVVM 的核心机制：

数据绑定（Model 与 ViewModel 的交互）

Vue 通过 data 选项定义 Model 层数据，这些数据会被 Vue 实例代理，成为响应式数据。当数据变化时，视图自动更新。

new Vue({
  data() {
    return {
      message: 'Hello MVVM'
    }
  }
})

模板语法（View 与 ViewModel 的连接）

Vue 的模板系统将 DOM（View）与数据（ViewModel）绑定。使用插值表达式或指令实现双向绑定：

<div id="app">
  <!-- 插值绑定 -->
  <p>{{ message }}</p>

  <!-- 指令绑定 -->
  <input v-model="message">
</div>

响应式系统（核心实现机制）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据变化时，依赖该数据的视图会自动重新渲染。

// Vue 2 响应式原理简化示例
function defineReactive(obj, key) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newVal) {
      value = newVal
      updateView() // 触发视图更新
    }
  })
}

指令系统（ViewModel 操作 View）

Vue 提供了一系列指令（如 v-if、v-for、v-bind 等），这些指令是 ViewModel 操作 View 的接口：

<div v-if="isVisible">条件渲染</div>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

计算属性和监听器（ViewModel 的业务逻辑）

计算属性（computed）和监听器（watch）是 ViewModel 中处理业务逻辑的重要部分：

new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName(newVal) {
      console.log('firstName changed to', newVal)
    }
  }
})

组件系统（MVVM 的模块化）

Vue 组件是独立的 MVVM 单元，每个组件包含自己的模板（View）、数据和方法（ViewModel）：

Vue.component('my-component', {
  template: '<div>{{ localData }}</div>',
  data() {
    return {
      localData: '组件数据'
    }
  },
  methods: {
    updateData() {
      this.localData = '更新后的数据'
    }
  }
})

生命周期钩子（ViewModel 的生命周期管理）

Vue 提供了 created、mounted 等生命周期钩子，用于在 ViewModel 不同阶段执行逻辑：

new Vue({
  created() {
    // 实例创建后调用
  },
  mounted() {
    // DOM 挂载后调用
  }
})

事件系统（View 与 ViewModel 的通信）

Vue 通过 v-on 指令实现 View 到 ViewModel 的事件通信：

<button @click="handleClick">点击</button>

new Vue({
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
})

通过以上机制，Vue 实现了完整的 MVVM 模式，使开发者能够专注于业务逻辑而非 DOM 操作，提高了开发效率和代码可维护性。