MVVM、数据的双向绑定、数据的响应式

一.MVVM

1：什么是MVVM

• Model代表模型：用来修改数据和处理业务逻辑；
• View代表视图：是用户在屏幕上看到的结构、布局和外观（UI）；
• ViewModel是视图模型：就是一个同步器，用来同步view和model的一个对象。在MVVM框架下，view和model之间是没有直接联系的，他们是通过ViewModel进行交互的。

2：MVVM模式

• MVVM是一种设计思想，实现了数据的双向绑定，当改变了model的数据，view会自动更新；改变view时，model的数据也会自动更新。（它是在单向绑定的基础上，给可输入元素input、textare等添加了input/change事件，通过触发事件来动态修改model）【v-model语法糖】
• ViewModel的实现原理是通过数据劫持（Object.defineProperty）【响应式】

3：MVC和MVVM的区别

1. MVC中Controller(控制器)演变成MVVM中的ViewModel
2. MVVM通过数据来显示视图层而不是节点操作
3. MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

二：数据的双向绑定（v-model指令）

1.v-model的原理：v-bind数据绑定 与 v-on处理函数绑定的语法糖

<input v-model="value">

2.想要v-model生效，它必须：

1. 接收一个value属性：data => DOM
   属性绑定（v-bind）：把data的值绑定到元素上，用于显示数据
2. 在value值改变的时候，触发input事件：DOM => data
   事件绑定（v-on）：对元素绑定一个事件，当值变化后把数据传递给控制层，进而来影响数据层

<input v-bind:value="value" v-on:input="value=$event.target.value">

三：数据的响应式

1. 数据的响应式是单向的：数据的变化导致页面的变化（data => dom）
2. 它是通过Object.defineProperty()来实现的
   响应式的核心：它在内部通过 Object.defineProperty API 劫持数据的变化，在数据被访问的时候收集依赖，然后在数据被修改的时候通知依赖更新