• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

浅谈Vue入门需掌握的知识

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择。最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解。

一、定义

Vue是一套用于构建用户界面的渐进式JavaScript框架

与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台。
形成Vue渐进式框架的核心概念为:组件化MVVM响应式,和生命周期,下面会一个个详细介绍。

二、为什么要用Vue?

1. 组件化

Vue将组成一个页面的HTML,CSS和JS合并到一个组件中,可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出,组件可以作为基础组件(如按钮)或一个页面(如登录页面)。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件,重复利用的性质也大大提高了开发的效率。

2. MVVM 数据双向绑定

MVVM模式(全称为Model-View-ViewModel)为Vue实现数据双向绑定。在MVVM中,View为视图层,ViewModel为业务逻辑层,Model为数据层。

什么是数据双向绑定呢?当用户使View变化时(如填写表单),变化会自动同步到ViewModel处理相应逻辑,并将变化更新到Model数据库。反之,若服务端数据变化(如股价波动),变化会自动同步到ViewModel处理相应逻辑,并将变化同步到View展现给用户。

在用Vue之前,我完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作,更高效地实现了视图和数据的交互。同时,MVVM使界面、交互和数据层分离,便于设计人员负责设计界面,后端开发人员提供数据接口,而前端开发人员专注于业务交互逻辑的实现。

3. 响应式 虚拟DOM

对于DOM来说,当HTML的一个元素(如div)需要响应数据更改时,会刷新整个页面,导致效率堪忧。对于虚拟DOM,浏览器会将HTML文件转换为JS文件并复制一个额外使用(虚拟)。对于任何更改,虚拟DOM都将复制的JS与原始JS进行比较,只重新加载更改的部分,局部修改到真实DOM上。

在Vue中,每个绑定data属性的组件都有一个Watcher检测data属性的变化。一旦检测到改变,则重新渲染该组件,这就是响应式

4. 生命周期

最后,每个Vue组件都有生命周期,过程为创建 -> 挂载 -> 更新 -> 销毁。开发者可以通过钩子函数(如mounted)在组件生命周期中的不同时刻进行操作。下面是一张Vue生命周期的完整图解。

三、Vue的优缺点

讲完Vue的几个核心概念后,总结一下使用Vue框架给前端开发带来的优缺点:

优点

1. 轻量级

Vue作为一款轻量级前端框架,大小只有18–21KB,工程搭建简单,只需要几行命令符。因为Vue使用的主体语言为JS,开发者可以灵活地将其他框架(如React和Angular)的项目迁移到Vue,具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用

2. 高性能

虚拟DOM和响应式避免了不必要的全局重新渲染,提升了用户体验,使用户操作更加流畅。

3. 好上手

与面向对象编程性质类似,组件化更符合人类思维。打个比方,我们在设计网页时,通常会把一个界面分成一块一块的、用于某功能的特定样式模块。Vue的组件化使前端开发更加容易理解,同时MVVM可以更便捷地实现交互,对新手十分友好。

4. 插件化

由于Vue框架的流行性,目前有许多基于Vue的npm扩展包和开发工具(如Vuex)。Vue可以在一个文件下统一管理所有外部插件的全局使用。

5. 便于测试

组件化利于开发者对于单一组件进行测试,很少发生在整个页面下找不到是哪个地方报错的情况。

缺点

1. 生态环境不够完善

虽然Vue五年以来的发展寻索,生态环境不如React和Angular规范。Vue开发的讨论社区较小

2. 国外市场小

Vue是由中国尤大神开发的,主要有阿里巴巴、饿了么等国内大公司作为主流框架,国外大部分使用React和Angular。

以上就是浅谈Vue简易入门知识的详细内容,更多关于vue入门的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
学习Vue框架中必掌握的重点知识发布时间:2022-02-05
下一篇:
vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap