2024年前端最新面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会），2024年最新前端一年经验面试

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

注：上图来自维基百科

View层和View-Model层，借助数据双向绑定，即上图中的DataBinding，View层发生变化之后，View-Model层可以立即监控到，并进行处理，同时将处理的结果反映到View层的页面上

Vue与MVVM

---

Vue的开发者，也参考了MVVM思想，并进行了一些改进，设计了独特的Vue独有的模型。

M：Model模型，对应的是data属性中的数据，需要写成一般的js对象，即上图中的plain JavaScript Objects

V：View视图，即Vue的模板Template，经过解析之后，形成的DOM页面

VM：ViewModel，即上图的绿色立方体所表示的Vue实例对象

上图中View和Model进行通信，有两条线：

一是Data Bindings：数据绑定，Model中的数据发生变化，Vue就将变化映射到页面上，另一个是DOM Listensers：DOM监听，一旦用户对页面进行操作，比如点击按钮，填写数据，Vue就将这种变化，映射到Model

那么，这在代码中是怎么体现这种思想的呢？

Demo代码展示

---

demo1

1.Model层通过ViewModel层，改变View层，View层通过ViewModel层，改变Model层

2.data中所有的属性，最后都出现在了vm身上。

3.vm实例对象身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用

demo2

在实际的项目开发中，我们都是使用vue的脚手架来创建项目，这里我也是使用这种方法来新建一个demo项目，展示的是vue直接给我们生成的代码，我直接根据这些代码进行分析MVVM思想。

红框表示的是一个vue实例对象，蓝框表示的是Model模型中的数据，橙框表示的是 View视图，紫框中的msg表示一个数据变量，需要从蓝框中的props中传过来

注意：理解这个小项目，需要了解Vue组件化思想和脚手架的基本使用。

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】