MVVM？
是什么？
- M - 数据模型 Model
- VM - 视图模型 ViewModel
- V - 视图层 View
mvvm 理解图
View 指看到的页面。
Model 指后端传递的数据。
ViewModel 视图模型是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：
- 一个是将视图转化成数据模型，将所看到的页面转化成后端的数据，实现方式：DOM 事件监听；
- 另一个方向是将模型转化成视图，即将后台传递的数据转化成页面，实现方式：数据绑定。
两种方式都能实现称为双向数据绑定。
在 MVVM 模式下视图和模型是不能直接通信的，通过 ViewModel 进行通信， ViewModel 通常要实现一个 observer 观察者，当数据发生变化时， ViewModel 能够监听到数据的变化，然后对视图进行更新。当视图发生变化，ViewModel 也能监听到视图的变化，然后通知数据进行改动，这就是数据的双向绑定。
Vue 就是一款 MVVM 框架
在 Vue 中：
- Model 就是 JS 数据，如对象、数组，用来存储后台传来的数据的数据结构。
- View 指的是 DOM 渲染出来的页面视图。
- ViewModel 指的是 vue 实例化对象 new Vue?
实现双向数据绑定的方法：
在 Vue 中的双向数据绑定：
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
——官方文档
v-model 实现原理又是什么？
基本原理是利用 Object.defineProperty() 这个方法重新定义了对象获取属性值（get）和设置属性值（set）的操作。
demo:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<input id="text" type="text" />
<p id="p"></p>
</body>
<script type="text/javascript">
var obj = {};
Object.defineProperty(obj,"name",{
get:function(){
return name;
},
set:function(value){
document.getElementById("text").value = value;
document.getElementById("p").innerHTML = value;
}
});
var input = document.getElementById("text");
input.addEventListener("input",function(event){
var text = event.target.value;
obj.name = text;
});
</script>
</html>
这种实现数据双向绑定的方法叫做数据劫持结合发布者-订阅者模式。
什么是数据劫持结合发布者订阅者模式？
- 数据劫持：在本例子中，通过
Object.defineProperty来劫持 name 属性的 setter 和 getter，在数据发生变化的时通知订阅者，触发回调函数； - 发布者/订阅者模式：订阅者可以定义为希望接收到通知的对象；发布者可定义为激活事件的对象。在本例中，文本输入框相当于一个订阅者， Obj相当于一个发布者。文本框通过
addEventListener接收 Obj 给它的启动通知，触发相应的函数，进行视图更新。
为什么要有 MVVM 框架？（结合MVC）
MVVM 框架是从 MVC 过度过来的，MVC 是 Model-View-Controller 的简写，即 模型-视图-控制器。M 和 V 和 MVVM 中的 M V 意思是一样的。Controller 指页面的业务逻辑。
MVC 理解图
尽管从图上来看 View 和 Controller 是分开的，但是事实上它们几乎是结对出现的，一个 View 只能与一个 Controller 匹配。这样就导致一个Controller 中有大量的业务逻辑。但是在实际开发中我们需要采用更灵活的方式，于是 MVVM 就诞生了。
网友评论