从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章将为大家详细讲解有关如何理解Vue的MVVM模式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名、网站空间、营销软件、网站建设、黄岩网站维护、网站推广。近几年伴随着Vue.js的版本升级,Vue.js也被越来越多的开发人员作为前端框架选,可以这样说,一个前端不了解Vue算不上一个优秀的前端工程师,当然面试升职不会Vue更会遭到很多闭门羹。
那么什么是Vue呢?
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,拥有非常容易上手的 API
很多初学者在刚刚学习Vue的时候,基本就开始拿起手册开写代码,其实在开始写Vue之前,我们有必要了解Vue.js的MVVM模式和jq的MVP模式。
先看效果:
我们想实现todolist的效果,也就是输入框输入内容提交后,在下面会显示出输入的内容。
这个效果实现并不难,Vue和jq都可以,那么同样的前端效果,jq也可以实现,那为什么要选Vue呢?那么这要从两者不同的模式开始说起。
MVP 模式
MVP模式就是我们在写jq代码的模式,我们来看MVP分别代表什么:
model层(数据层),
presenter层(控制层/业务逻辑相关)
view(视图层)
Presenter是最核心的一层,在用jq实现效果的时候,会发现有大量的代码在操作DOM。
我们会发现jq是通过改变页面的Dom结构实现效果,获取输入框数据后,会不断的增加li标签,从而实现效果。所以实现前端效果,Presenter层占了很大的代码比例,model层相比下代码量很少。
MVVM 模式
MVVM 是 Model-View-ViewModel 的缩写。
其中Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI组件,可以理解为html页面代码,ViewModel 是一个同步 View 和 Model 的对象。
MVVM 更多的是处理数据,而不是操作DOM。
相同的效果,我们看看Vue是如何实现的:
- {{item}}
可见,Vue是通过获取input数据,然后v-for数据循环来实现效果,而不是修改html,这是MVP模式和MVVM模式大的区别。
那么频繁的操作DOM的缺点是效率低,解析速度慢,内存占用量过高,如果页面比较长,其缺点会更加暴露出来,那么加载时间也就不会很快了。
这也就是为什么同样的效果,我们都在追寻前沿的Vue,慢慢淘汰掉jq的原因。升职加薪,Vue技能赶紧get起来吧。
关于如何理解Vue的MVVM模式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图