一.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)【响应式】
- MVC中Controller(控制器)演变成MVVM中的ViewModel
- MVVM通过数据来显示视图层而不是节点操作
- MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
二:数据的双向绑定(v-model指令)
1.v-model的原理:v-bind数据绑定 与 v-on处理函数绑定的语法糖
<input v-model="value">
2.想要v-model生效,它必须:
- 接收一个value属性:data => DOM
属性绑定(v-bind):把data的值绑定到元素上,用于显示数据
- 在value值改变的时候,触发input事件:DOM => data
事件绑定(v-on):对元素绑定一个事件,当值变化后把数据传递给控制层,进而来影响数据层
<input v-bind:value="value" v-on:input="value=$event.target.value">
三:数据的响应式
- 数据的响应式是单向的:数据的变化导致页面的变化(data => dom)
- 它是通过Object.defineProperty()来实现的
响应式的核心:它在内部通过 Object.defineProperty API 劫持数据的变化,在数据被访问的时候收集依赖,然后在数据被修改的时候通知依赖更新