前端面试题:谈谈对MVVM的理解_视图_模式_理解

谈谈对MVVM的理解

什么是MVVM

不管是MVC,MVP,或者MVVM,都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往使用了多种设计模式。MVVM,可以拆分为Model-View-ViewModel来理解:

Model - 数据模型,可以对应到真实开发过程中的

数据包

View - 视图层,布局和外观,可以对应到真实开发中的

DOM结构

ViewModel - 扮演“View”和“Model”之间的使者,帮忙处理 View 视图层的全部业务逻辑

为什么使用MVVM框架

要回答这个问题,我们需要对比一下,在使用MVVM框架之前,我们是如何完成前端交互的。

使用前

为了修改某个视图节点中的内容信息,我们需要频繁人为操作DOM,效率低下

var dom = document.querySelector('div');

dom.innerHTML = '张三丰';

dom.style.color = 'red';

使用后

当name数据发生变化的时候,视图区域的name自定触发更新,极大提高开发效率

{{name}}

data:{

name:‘张三丰’

3. 通过上述案例进一步理解MVVM

name数据包可以认为就是那个Model

div 节点可以认为就是那个View

而Vue提供的语法环境所支持的数据驱动能力,就可以认为是那个ViewModel

特别声明

本文仅代表作者观点,不代表本站立场,本站仅提供信息存储服务。

分享:

扫一扫在手机阅读、分享本文