谈一下你对 Vue.js 的 MVVM 原理的理解

问题

谈一下你对 Vue.js 的 MVVM 原理的理解

答案

传统MVC

传统的MVC指的是

• M是指业务模型，Model（模型）
• V是指用户界面，View（视图）
• C则是控制器，Controller（控制器）

使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。

如上图所示，用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数据。将结果返回给前端,页面重新渲染

MVVM

MVVM 是 Model-View-ViewModel 的缩写

• Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
• View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
• ViewModel 监听模型数据的改变和控制视图⾏为、处理⽤户交互，简单理解就是⼀个同步View 和 Model 的对象，连接 Model 和 View

传统的前端会将数据手动渲染到页面上,MVVM模式不需要用户手动操作dom元素；

将数据绑定到viewModel层上，会自动将数据渲染到页面中，视图变化会通知viewModel层更新数据。

ViewModel就是我们MVVM模式中的桥梁.

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

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，⽽ View 和 Model 之间的同步⼯作完全是⾃动的，⽆需⼈为⼲涉，因此开 发者只需关注业务逻辑，不需要⼿动操作DOM，不需要关注数据状态的同 步问题，复杂的数据状态维护完全由 MVVM 来统⼀管理

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！