0

0

如何更好的理解Vue的MVVM 模式?

王雪芹

王雪芹

发布时间:2020-08-06 17:43:47

|

2013人浏览过

|

来源于php中文网

原创

近几年伴随着vue.js的版本升级,vue.js也被越来越多的开发人员作为前端框架首选,可以这样说,一个前端不了解vue算不上一个优秀的前端工程师,当然面试升职不会vue更会遭到很多闭门羹。

那么什么是Vue呢?

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,拥有非常容易上手的 API

很多初学者在刚刚学习Vue的时候,基本就开始拿起手册开写代码,其实在开始写Vue之前,我们有必要了解Vue.js的MVVM模式和jq的MVP模式。

先看效果:

我们想实现todolist的效果,也就是输入框输入内容提交后,在下面会显示出输入的内容。

立即学习前端免费学习笔记(深入)”;

微信截图_20200806171655.png

这个效果实现并不难,Vue和jq都可以,那么同样的前端效果,jq也可以实现,那为什么要首选Vue呢?那么这要从两者不同的模式开始说起。

MVP 模式

MVP模式就是我们在写jq代码的模式,我们来看MVP分别代表什么:

model层(数据层),

presenter层(控制层/业务逻辑相关)

我要服装批发网
我要服装批发网

由逍遥网店系统修改而成,修改内容如下:前台商品可以看大图功能后台商品在线添加编辑功能 (允许UBB)破解了访问统计系统增加整合了更加强大的第三方统计系统 (IT学习者v1.6)并且更新了10月份的IP数据库。修正了后台会员订单折扣金额处理错误BUG去掉了会员折扣价这个功能,使用市场价,批发价。这样符合实际的模式,批发价非会员不可看修正了在线编辑无法使用 “代码&rdqu

下载

view(视图层)

Presenter是最核心的一层,在用jq实现效果的时候,会发现有大量的代码在操作DOM。

微信截图_20200806171536.png

    我们会发现jq是通过改变页面的Dom结构实现效果,获取输入框数据后,会不断的增加li标签,从而实现效果。所以实现前端效果,Presenter层占了很大的代码比例,model层相比下代码量很少。

    MVVM 模式

    MVVM 是 Model-View-ViewModel 的缩写。

    其中Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI组件,可以理解为html页面代码,ViewModel 是一个同步 View 和 Model 的对象。

    微信截图_20200806173442.png

    MVVM 更多的是处理数据,而不是操作DOM。

    相同的效果,我们看看Vue是如何实现的:

    • {{item}}

    可见,Vue是通过获取input数据,然后v-for数据循环来实现效果,而不是修改html,这是MVP模式和MVVM模式最大的区别。

    那么频繁的操作DOM的缺点是效率低,解析速度慢,内存占用量过高,如果页面比较长,其缺点会更加暴露出来,那么加载时间也就不会很快了。

    这也就是为什么同样的效果,我们都在追寻前沿的Vue,慢慢淘汰掉jq的原因。升职加薪,Vue技能赶紧get起来吧。

    相关专题

    更多
    vue.js为什么报错
    vue.js为什么报错

    vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    120

    2024.03.11

    vue.js插槽有哪些用
    vue.js插槽有哪些用

    vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    171

    2024.03.11

    vue.js怎么带参数跳转
    vue.js怎么带参数跳转

    vue.js带参数跳转的方法:1、定义路由;2、在组件中使用路由参数;3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    90

    2024.03.11

    html版权符号
    html版权符号

    html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    611

    2023.06.14

    html在线编辑器
    html在线编辑器

    html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

    646

    2023.06.21

    html网页制作
    html网页制作

    html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

    466

    2023.07.31

    html空格
    html空格

    html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

    245

    2023.08.01

    html是什么
    html是什么

    HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

    2889

    2023.08.11

    C++ 单元测试与代码质量保障
    C++ 单元测试与代码质量保障

    本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

    6

    2026.01.16

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Vue 教程
    Vue 教程

    共42课时 | 6.5万人学习

    Vue3.x 工具篇--十天技能课堂
    Vue3.x 工具篇--十天技能课堂

    共26课时 | 1.4万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号