MVVM 原理-数据驱动视图

常见的面试问题：

• Vue 数据绑定的原理？
• MVVM 数据绑定的原理？
• Vue 双向数据绑定的原理？
• Vue 数据响应式原理？
• 数据响应式原理？

当前比较流行的前端框架都是采用的 MVVM 的方式：

什么是 MVVM？

简单一句话：数据驱动视图。

介绍

感受 MVVM

• 传统的 DOM 操作方式
• 模板引擎方式
• 数据驱动视图方式（MVVM）

什么是 MVVM

简单一句话：数据驱动视图

<!-- 视图 -->
<template>
  <div>{{ message }}</div>
</template>

<!-- ViewModel -->
把普通的 JavaScript 对象和视图 DOM 之间建立了一种映射关系：
- 数据的改变影响视图
- 视图（表单元素）的改变影响数据

<script>
// Model 普通数据对象
export default {
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

<style>

</style>

• Model（M）：普通的 JavaScript 对象，例如 Vue 实例中的 data
  • 普通数据
• View（V）：视图
  • HTML DOM 模板
• ViewModel（VM）：Vue实例
  • 负责数据和视图的更新
  • 它是 Model数据 和 View 视图通信的一个桥梁

逻辑：

1.把数据绑定到视图，vm解析插值表达式和指令，找到模型中的数据，把数据在视图中呈现出来

视图通信的一个桥梁

逻辑：

1.把数据绑定到视图，vm解析插值表达式和指令，找到模型中的数据，把数据在视图中呈现出来

2.视图发生变化，在DOM中注册input等事件进行触发事件，更改model中的数据