Vue 的 MVVM 思想(包含三个常见面试题)

1. 正确理解：

MVVM -Model View ViewModel，最核心的就是 ViewModel 。ViewModel 包含 DOM Listeners 和 Data Bindings。

Data Bindings 用于将数据绑定到 View 上显示，DOM Listeners 用于监听操作。

• 从 Model 到 View 的映射，也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间。

• 从 View 到 Model 的事件监听，也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变。数据的请求和视图的请求完全解耦(相互影响)。

2. 两个方向：

MVVM思想有两个方向。

• 一是将模型转换成视图，即将后端传递的数据转换成看到的页面。 实现方式是：数据绑定。

• 二是将视图转换成模型，即将看到的页面转换成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，就称为数据的双向绑定。

3. MVC 和 MVVM 的区别(关系)

MVC - Model View Controller( controller: 控制器 )，M 和 V 和 MVVM 中的 M 和 V 意思一样，C 指页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离，但 MVC 是单向通信，也就是将 Model 渲染到 View 上，必须通过 Controller 来承上启下。

MVC 和 MVVM 的区别(关系)并不是 ViewModel 完全取代了 Controller 。

• ViewModel 目的在于抽离 Controller 中的数据渲染功能，而不是替代。
• 其他操作业务等还是应该放在 Controller 中实现，这样就实现了业务逻辑组件的复用。

4. 常见关于Vue的面试题

• 什么是MVVM思想？

MVVM -Model View ViewModel，它包括 DOM Listenters 和 Data bindings，前者实现了页面与数据的绑定，当数据发生变化的时候会自动渲染页面。后者实现了数据与页面的绑定，当页面操作数据的时候 DOM 和 Model 也会发生相应的变化。

• MVVM相对于MVC的优势？

1. MVVM 实现了数据与页面的双向绑定，MVC 只实现了 Model 和 View 的单向绑定。
2. MVVM 实现了页面业务逻辑和渲染之间的解耦，也实现了数据与视图的解耦，并且可以组件化开发。

• VUE是如何体现MVVM思想的？

1. 胡子语法，实现了数据与视图的绑定。
2. v-on 事件绑定，通过事件操作数据时，v-model 会发生相应的变化。