MVVM

2019-05-13 本文已影响0人 Dylean

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 就诞生了。