前端基础（二）

MVVM

1. MVVM 是 Model-View-ViewModel 的缩写，即 模型-视图-视图模型。

Model：后端传递的数据。

View：所看到的页面。

ViewModel：MVVM模式的核心，它是连接Model和View的桥梁。

2. ViewModel 有两个方向

将 Model 转化成 View ，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

将 View 转化成 Model ，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。 这两个方向都实现的，我们称之为数据的双向绑定。

3. 总结

在MVVM的框架下视图和模型是不能直接通信的，它们通过ViewModel来通信。

ViewModel通常要实现一个Observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到View 上。

　ViewModel 通过双向数据绑定把 View 和 Model 连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
前后端分离，开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计。

v-if,v-show区别：

• v-show指令是通过修改元素的displayCSS属性让其显示或隐藏
• v-if指令直接销毁和重建DOM达到让元素显示和隐藏的效果
• 应用场景：如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好