2024年前端最全面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会），带你彻底搞懂前端启动速度优化

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

目录

概述

Vue与MVVM

Demo代码展示

demo1

demo2

---

---

概述

–

MVVM的英文全称是：Model、View、View-Model，是一种基于前端的架构模式

M：Model，即模型，在model层，定义数据和业务逻辑

V：View，即视图，ui界面，将数据和动态交互效果展示出来

VM：View-Model，视图模型，实现Model和View的通信：监听Model的数据改变，处理用户交互操作，并且重新渲染视图，更新页面

注：上图来自维基百科

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

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

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。