Vue教学篇之MVVM模式

原创 潇洒先生 教程 vue 216阅读 2018-04-15 10:14:59 举报

为何写这篇文章?

公司项目一直采用的是React全家桶开发的。近期公司让做一款项目,由于不是很急打算用Vue开发试试尝尝鲜。由于接口、UI都还没完事,自己先借这个git项目先熟悉熟悉Vue,把Vue中常用的知识点总结下方便自己的同时也方便他人。本项目从Vue基础语法入手,逐层递进,让您更好的掌握Vue各个基础知识点。包括Vue中的CSS动画原理、Vue中使用animate.css库、Vue中同时使用过渡与动画效果、Vue中使用Velocity.js库、Vue中多组件和列表过度 、Vue中动画的封装、vuex等等。

MVVM模式

传统开发中前端通常使用MVP设计模式

MVP

在这种设计模式下我们通常把代码分为三层,M层是数据层,V层是是视图层一般指的是数据展示,P层是控制层,下面是一个简单的MVP模式对应的前端代码

这个例子因为没有请求接口,所以弱化了M数据层。div里面是V层,script标签里的操作Dom的是P层,当我们点击页面按钮提交时会执行P层的代码,更新页面。P层相当于M和V层的中转站,P层中的很大一份代码都是在做DOM的操作。而前端存在大量操作DOM的行为会严重影响页面性能。

下图是vue中MVVM模式的示意图

MVP

MVVM模式中也有视图层V和数据层M,但是没有P层取而代之的ViewModel层,从上图我们也可以看出VM层是vue自己带的,由此可以看出在使用MVVM进行开发Dom的操作被极大的简化了代码量会得到显著的减少,我们只需要关注M层和V层,更多是关注的M层就可以了。

欢迎大家来我的github拍砖:我的github

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复