2024年Web前端最全面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会）(2)，Web前端岗面试

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

---

概述

–

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

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

Demo代码展示

---

demo1

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

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

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

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

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

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

baccf39ce440a0fb5c.png)

• Vue 学习笔记