• vue相关面试题:MVC,MVP,MVVP三种设计模式的区别


    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    什么是MVVM?比之MVC有什么区别?什么又是MVP

    MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化我们的开发效率。

    在这里插入图片描述

    MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑Model 负责存储页面的业务数据,以及对相应数据的操作。并且 View 和 Model 应用了观察者模式,当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带,它主要负责用户与应用的响应操作,当用户与页面产生交互的时候,Co ntroller 中的事件触发器就开始工作了,通过调用 Model 层,来完成对 Model 的修改,然后 Model 层再去通知 View 层更新。

    MVC的优点
    1.耦合性低,视图层和业务层分离,这样就允许更改视图层代码而不用重新编译模型和控制器代码
    2.重用性高
    3.生命周期成本低
    4.MVC使开发和维护用户接口的技术含量降低
    5.可维护性高,分离视图层和业务逻辑层也使得WEB应用更易于维护和修改
    6.部署快

    MVC的缺点
    1.不适合小型,中等规模的应用程序,花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。
    2.视图与控制器间过于紧密连接,视图与控制器是相互分离,但却是联系紧密的部件,视图没有控制器的存在,其应用是很有限的,反之亦然,这样就妨碍了他们的独立重用。
    3.视图对模型数据的低效率访问,依据模型操作接口的不同,视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问,也将损害操作性能。

    在这里插入图片描述

    MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。在 MVC 模式中我们使用观察者模式,来实现当 Model 层数据发生变化的时候,通知 View 层的更新。这样 View 层和 Model 层耦合在一起,当项目逻辑变得复杂的时候,可能会造成代码的混乱,并且可能会对代码的复用性造成一些问题。MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的 Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,MVP 模式中,View 层的接口暴露给了 Presenter 因此我们可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦,Presenter 还包含了其他的响应逻辑。
    MVP的优点
    1.模型与视图完全分离,我们可以修改视图而不影响模型;
    2.可以更高效地使用模型,因为所有的交互都发生在一个地方——Presenter内部;
    3.我们可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化总是比模型的变化频繁;

    MVP的缺点
    视图和Presenter的交互会过于频繁,使得他们的联系过于紧密。也就是说,一旦视图变更了,presenter也要变更

    在这里插入图片描述

    MVVM 模式中的 VM,指的是 ViewModel,它和 MVP 的思想其实是相同的,不过它通过双向的数据绑定,将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候,ViewModel 就会自动更新;ViewModel 变化了,View 也会更新。这样就将 Presenter 中的工作给自动化了。

    MVVM的优点
    ★MVVM会让你的程序完全解耦
    ★可重用性:你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
    ★独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码
    ★可测试:界面素来是比较难于测试的,而现在测试可以针对ViewModel来写

    MVVM的缺点
    ★MVVM不会提升程序的性能,甚至用不好还会降低程序的性能
    ★MVVM会增大代码的总量

    说说VueX页面渲染流程

    在这里插入图片描述

    初始化调用 $mount 挂载组件。
    _render 开始构建 VNode,核心方法为 createElement,一般会创建普通的 VNode ,遇到组件就创建组件类型的 VNode,否则就是未知标签的 VNode,构建完成传递给 _update。
    patch 阶段根据 VNode 创建真实节点树,核心方法为 createElm,首先遇到组件类型的 VNode,内部会执行 $mount,再走一遍相同的流程。普通节点类型则创建一个真实节点,如果它有子节点开始递归调用 createElm,使用 insert 插入子节点,直到没有子节点就填充内容节点。最后递归完成后,同样也是使用 insert 将整个节点树插入到页面中,再将旧的根节点移除。

  • 相关阅读:
    Linux学习-49-列出进程调用或打开的文件信息(lsof命令)
    腾讯mini项目-【指标监控服务重构】2023-08-18
    AD22使用笔记+积累库
    Rxjs TakeUntil 操作符的学习笔记
    LightGBM原生接口和Sklearn接口参数详解
    关于 Python 字符串切片的小领悟
    氨基NH2/羧酸COOH/马来酰亚胺MAL修饰CdTe/CdS量子点
    记一次Spark 提交任务执行缓慢之问题解决了
    DVWA-弱会话IDS
    《动手学深度学习 Pytorch版》 9.5 机器翻译与数据集
  • 原文地址:https://blog.csdn.net/xiaolu567/article/details/126239843