Vue 的 MVVM 设计模式

MVVM 模型

定义概述

MVVM 是 Model-View-ViewModel 的简写，M 表示模型层（存储数据）, V 表示视图层（显示数据） , VM 表示视图模型控制层（Vue 框架自带，开发时无需关注具体实现）。

实现原理

当修改 M 层（模型层）数据时，V 层（视图层）会自动跟着进行更新，这是通过 VM 层（API：Object.defineProperty 和 虚拟 DOM 机制来实现）来实现的。

当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

代码示例

<template>
    <!-- V 层 start -->
    <div>
        <input type="text" v-model="inputValue" />
        <button @click="handleBtnClick">提交</button>
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
    </div>
    <!-- V 层 end -->
</template>

<script>
export default {
  /* -- M 层 start -- */
  data () {
    return {
      list: [],
      inputValue: ""
    }
  },
  methods: {
    handleBtnClick () {
      this.list.push(this.inputValue);
      this.inputValue = "";
    }
  }
  /* -- M 层 end -- */
}
</script>

实现好处

VM 层通过双向数据绑定把 V 层和 M 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，这样的好处是在开发过程中只需关注 M 层即可，M 层是核心（面向数据开发），极大地减少了对 DOM 操作的开发，减少代码量。