一、Vue基础知识
Web前端开发模式:
- 原生代码开发:直接使用原生HTML、CSS和JavaScript代码进行前端开发。
- 优点:学习成本较低,容易入手。
- 缺点:代码结构混乱,代码冗(rong)余,浏览器兼容性不成熟,不利于分工合作
- 代码库阶段:使用成熟开源的扩展库进行前端开发(如jQuery、Bootstrap等)。
- 优点:开发快速,浏览器兼容性良好
- 缺点:视图层和数据层混合在一起,不利于团队分工合作
- 框架开发阶段:采用前端的MVC模式或MVVM模式开发。
- 优点:代码分层,便于团队合作,便于后续代码维护
- 缺点:学习成本较高,框架更新换代较快(需要时刻处于学习新知识的状态)
MVC和MVVM开发:
-
MVC模式:把应用程序强制性的划分为三部分:模型(Model)、视图(View)和控制器(Controller)
- 执行过程:
- View层接收动作,传递指令给Controller
- Controller完成业务逻辑,要求Model改变状态
- Model将新的数据发送给View,用户得到反馈
- 执行过程:
-
MV-VM模式:
- View层用来接收用户请求(DOM事件、Ajax等)
- Model层处理数据,不再与View层交互数据
- Controller层修改为ViewModel层(视图模型)
- ViewModel监听View层请求状态的变化,同时刷新View层显示
- ViewModel和Model之间进行数据双向绑定,Model层监听ViewModel的变化
-
MVC和和MVVM模式区别:
- MVC模式,数据是单向通信,遵循View -> Controller -> Model -> View方向
- MVVM模式,数据可以双向通信
主流MVVM框架简介
-
Angular:谷歌推出的前端MVVM框架
- 功能强大:包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,自带了丰富Angular指令。
- 推荐使用TypeScript,引入静态语法支持,代码更严谨。
- Google维护:AngularJS由Google维护,社区非常活跃,能够很好促进它的发展。
- AngularJS & Lonic:移动端跨平台APP开发黄金搭档。
- 缺点:功能复杂,学习曲线陡峭。
-
React: Facebook推出的前端JS库(不是严格意义上的MVVM框架)
- 简单和专注,只专注于某一方面功能,学习简单。
- 视图层使用JSX语法,增强视图层功能。
- 一切以JavaScript为核心,JS规范做标准。
- 跨平台移动APP开发能力强大,使用想着扩展可以快速开发移动端应用。
- 缺点操作DOM能力较差,需要大量扩展的支持。
-
Vue.js:尤雨溪(国人)于2014年开发的前端MVVM框架。
- 学习成本较低,能快速进行应用开发。
- 拥有非常强大的CLI工具,方便应用快速部署和模块化开发。
- 扩展模块丰富,扩展功能强大。
- 与Laravel集成,特别适用于服务器端API开发。
- 缺点:跨平台移动APP开发能力薄弱。
-
Angular & React & Vue各自优缺点对比:
框架比较项 Angular React Vue 发布时间 2009年 2013年 2014年 维护者 谷歌 Facebook 尤雨溪(个人)
Laravel视图引擎 HTML JSX HTML 学习曲线 陡峭(TypeScript ) 较复杂 简单 大小 5000K+ 130K+ 50K+ 功能复杂度 完善 完善 简单 文档 英文 英文 中文 应用场景 大型复杂应用 中大型应用、移动跨平台开发 中小型轻量级应用 -
流行趋势对比: