Vue的MVVM的理解

2022-05-09 本文已影响0人未路过

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，通过$ refs可以拿到DOM对象，用$refs直接去操作视图。这一点上，违背了MVVM思想。

5.总结

所以viewmodel最主要就是做这两件事情。

第一个叫做data bindings,把我们model上的数据绑定到这个dom（view）上面，

另一个是界面上发生一些事情，发生一些用户操作的时候，再把这些定义的东西（js代码），把它回调到我们这个javascipt里面的对象（model），着我们这个案例里面，就是刚才这个methods定义的函数里面，他就会回调这些函数，你就可以再这个函数里面做更多的这个操作了。