``` 本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！转载请注明出处，未经同意，不可修改文章内容。 ``` **🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。** **🔥🔥🔥“前端一万小时”两大明星专栏——“[从零基础到轻松就业](https://mp.weixin.qq.com/s?__biz=MzAwMzk0NDYyMQ==&mid=2247490634&idx=1&sn=0544bd6999082c033af9e58286bdb4b8&chksm=9b322588ac45ac9ec053b20902d7f0a442eda9362c17701ecdf2cd086eedc2e7afc4f5074b94&token=1371638347&lang=zh_CN#rd)”、“[前端面试刷题](https://mp.weixin.qq.com/s?__biz=MzAwMzk0NDYyMQ==&mid=2247490635&idx=1&sn=4ac0ec7ee8b864980148c51b1d36bdf5&chksm=9b322589ac45ac9faa2e62038ddc23794ca1142680ab0ff57b5d25ba7abb801da9b75fd92b64&token=1371638347&lang=zh_CN#rd)”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。** --- ``` 涉及面试题： 1. 什么是 MVVM？比之 MVC 有什么区别？ 2. Vue 的优点？ 3. 渐进式框架的理解？ 4. 三大框架的对比？ [编号：vue_03] ``` [🔗本阶段对应的“官方文档”阅读“介绍”章节](https://cn.vuejs.org/v2/guide/index.html) ## MVVM 设计模式 ![03-01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8753429b2e9e49eebf6a71bf98bf1b24~tplv-k3u1fbpfcp-zoom-1.image) Vue 是 MVVM 模式的框架。当我们使用 MVVM 这种模式的框架进行编码的时候，我们不需要关注 VM 这一层到底是怎么实现的，它是 Vue 内置的。我们只需要关注“ M 层”和“ V 层”。对 MVVM 这种模式进行编码的时候，编码的重点在于“视图层”和“模型层”。 - **View：视图层，负责显示数据。** 会监听数据、事件的触发（主要是 Vue 的指令）。 ```html

{{item}}

``` - **Model：数据层，负责存储数据。** 在 Vue 中，我们主要在写数据。 💡 **【重点关注这一层】——面向数据开发。** ```html ``` - **ViewModel：** 这是 Vue 自带的一层，不需要我们编写。它将 View 层和 Model 层连接起来，当视图层变化时，数据层也跟着变化，反之亦然。这其中 ViewModel 带动其视图和数据的变化。 🏆**总结：** ![03-01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a2bfbb3e7d04970aeace39c74d2e62b~tplv-k3u1fbpfcp-zoom-1.image) - Vue （即 ViewModel 层）会监听到你数据变了，它会帮你去改变视图层； - Vue 也会监听到视图层有一些事件触发，然后帮助你通过 VM 这一层去调用你写的一些逻辑代码，通过这些代码，你又改变了 M 层的“数据”。当“数据”发生变化的时候，VM 层又会自动地把“数据”的变化映射到“视图层”上面来。 🏆这样的话有一个好处：当我们使用 Vue 这种 MVVM 框架进行开发的时候，我们只需要去关注“ M 层”的开发就可以了！我们把“数据”做一个修改，页面会自动地跟着变。同时，页面上的变化，Vue 实例也能感知到，可以方便地帮我们去操作数据。祝好，qdywxs ♥ you！