Vue使用了MVVM模型。
1. MVVM介绍
MVVM是Model-View-ViewModel的简写。而MVVM是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据。
2.Vue的MVVM
1.png
定义：view对于的是我们的dom，model的话，对应我们的数据. viewmodel的话，相当于我们的vue。
作用：如果你现在这个view和我们的model直接想要通信，他们两个之间能直接通信吗？
不能，要通过我们的viewmodel，它帮助我们做了两件事情，
- 第一件事情，就是data-bindings,把我们model上的数据绑定到这个dom（view）上面。
Vue实例通过mustache语法，给Mode里面的数据绑定到view里面。vue是响应式，自动检测到model里面数据的改变，把最新的数据再重新绑定到view上面。
所以view上面永远显示的是model上面最新的数据，就是viewmodel帮我们做了这个事情。
- 第二个事情，就是Dom Listener
就是dom监听。就是当我们view上面有一些事件或者有用户操作的话，viewmodel会我们dom做一些监听，把事件相关的东西绑定到model上面。
3.计数器案中的MVVM
2.png
3.png
计数器的案例，当点击的时候，通过v-on：click这一个指令，这是viewmodel自己定义的一个指令。它会通过v-on这个指令，把它绑定到我们model上面，它会我们dom做一些监听，你可以写一些js代码，比如methods里面，定义一些函数，把它绑定到我们的函数里面，所以你一旦view发生点击之后的或，这个viewmodel他会监听到这个dom的响应的，他会来回调我们刚刚再methods里面定义的那些函数。
4. Vue没有完全遵循MVVM模型
Model变更触发View更新必须通过VewModel (Vue实例)。----- set时触发依赖，异步更新模板
而View变更后触发Model也必须通过VewMode。 ---------利用v-model指令 ， 用户手动输入数据 触发@input事件，更改数据。
但是为什么说Vue没有完全遵循MVVM架构呢，因为Vue中添加了一个属性refs可以拿到DOM对象，用$refs直接去操作视图。这一点上，违背了MVVM思想。
5.总结
所以viewmodel最主要就是做这两件事情。
第一个叫做data bindings,把我们model上的数据绑定到这个dom（view）上面，
另一个是界面上发生一些事情，发生一些用户操作的时候，再把这些定义的东西（js代码），把它回调到我们这个javascipt里面的对象（model），着我们这个案例里面，就是刚才这个methods定义的函数里面，他就会回调这些函数，你就可以再这个函数里面做更多的这个操作了。
网友评论