Vue中的MVVM【第三篇】

大纲：

        MVVM图示

 🌈 一、MVVM简介 

        简单来说：MVVM（M-VM-M），一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

M(Model)：Model数据模型，json格式数据

V(View)：View视图，jsp、html

VM(ViewModel)：ViewModel视图模型

  🌈 二、MVVM详解

       我以MVVM图示来进行详解，View为Dom层，Model相当于对应的数据(js)，ViewModel相当于Vue实例；Data Bindings(绑定事件)，DOM Listeners(DOM监听)。

    ❓  第一个问题(question)：若View和Model之间想要进行通信怎么处理呢？

🟢 answer：

        首先，我们要知道 View 和 Model 它们俩是不能直接进行通信的，需要通过ViewModel，ViewModel帮助我们做了2件事。

  🅰️ 会将我们 (Mode) data 中定义的数据绑定到 View(真实的Dom上) 中，我们只需编写ViewModel 固定的语法即可，至于里面具体什么数据；都会由ViewModel进行解析，解析完成更新到界面上。

  ❗️ 提示：

        Model 是响应式的，数据一旦发生改变，它会自动监测到这个数据的改变，把最新的数据重新绑定到View界面上，故View上面显示的永远都是Model中最新的数据。

  🅱️ 它实现了DOM Listener(DOM监听)，当DOM发生一些事件（如：点击、滚动、touch[触摸]事件等）时，可以监听到，并在需要的情况下改变对应的Data。

 🌈 三、MVVM案例

在我第二篇的计数器案例中就有严格的MVVM思想。

 ⭐ View依然是我们的DOM
 ⭐ Model就是data中的数据
 ⭐ ViewModel就是我们创建的Vue对象实例

❓  第二个问题(question)：它们之间如何工作呢 ?
 🟢 answer：

        首先，ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
        其次，ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

🌈 四、MVVM总结

🍒 View层:

     🥝1、视图层 (在我们前端开发中，通常就是DOM层)
   🥝 主要的作用：给用户展示各种信息。
🍒 Model层:
     🥝2、数据层
   🥝 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。🍒 ViewModel层:
     🥝  3、视图模型层
     🥝  视图模型层是 View和Model 沟通的桥梁。
🅰 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
🅱另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。