Vue学习之理解MVVM

理解MVVM

定义

在官方文档中用来接收 Vue 实例的变量都是 VM，那么 VM 又是什么呢

Vue 诞生之初，参考了 MVVM 模型，但没有完全遵循。

MVVM 模型有些类似于 MVC

其中 Model 就普通的 JS 对象，而 View 就是我们看到的页面，也就是 DOM。

负责连接 Model 和 View 的就是 VM（ViewModel）。在 Vue 中，VM 就是 View 实例对象，它可以通过 Data Bingdings，也就是数据绑定 v-bind，来渲染 View。还可以通过 DOM Liseners，来监听 View 的改变。并传递给 Model，就是 v-model 的功能。所以一般我们使用 vm 变量来接收 Vue 实例

代码！

<div id="root">
  <h1>Name: {{name}}</h1>
  <h1>Email: {{email}}</h1>
</div>
<script>
  // 由于Vue实例就是ViewModel，所以可以通过vm来表示Vue实例
  const vm = new Vue({
    el: "#root",
    data: {
      name: "mike",
      email: "test@example.com",
    },
  });
</script>

照例写出测试代码

如果添加一句console.log(vm)就会在控制台中打印出 Vue 实例对象

可以看到 data 中的参数变成了 Vue 属性（data 中的属性不能与 Vue 实例本身的属性重名，否则只会调用到后者）
当然页面中通过模板语法可以调用 Vue 实例的所有属性和方法，只不过方法只能看到源码

总结

MVVM 模型

1. M:模型(Mode1):data 中的数据
2. V:视图(View):模板代码
3. VM:视图模型(ViewMode):Vue 实例

观察发现：

1. data 中所有的属性，最后都出现在了 vm 身上。
2. vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。

目标

• 理解 MVVM 模型
• 了解 Vue 实例的属性