前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >初识 Vue

初识 Vue

原创
作者头像
软件架构师Michael
发布2022-08-24 00:02:50
4010
发布2022-08-24 00:02:50
举报
文章被收录于专栏:软件工程师Michael

前面的一系列文章把JavaScript基础大致撸了一遍。在这个基础之上,我们即将进入当今前端最火热的框架Vue的探索之旅。

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。最初它不过是个人项目,时至今日,已成为全世界三大前端框架之一,github 上拥有 15 万 Star 领先于 React 和 Angular,在国内更是首选。

它的设计思想、编码技巧也被众多的框架借鉴、模仿。Vue 的核心库只关注视图层。很多人都说,Vue特别容易上手,到底容不容易也是因人而已,也要看学到什么程度吧。

官方网站:https://cn.vuejs.org/

1.JavaScript库与框架的区别

库是用来提供一些方法的集合,避免重复定义相同功能的函数并具有一定的模式兼容性,而所谓框架,更应该是规范开发者按照框架的设计去做一些事,而非简单的工具集的概念,框架可以提供相应的库或者基于库来实现,但库一般不会具备框架的规范性。

举个例子,像jQuery这种属于类库,它就是一些函数的集合,就是把特定效果的代码写好,你只需要在用的时候要用很少的代码去调用,由你来决定何时使用类库。

像AngularJS是一种框架,是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。

2.Vue发展历史

2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量框架,最初命名为 Seed 。

2013年12月,更名为 Vue,图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。

2014.01.24,Vue 正式对外发布,版本号是 0.8.0。

2014.02.25,0.9.0 发布,有了自己的代号:Animatrix,此后,重要的版本都会有自己的代号。

2015.06.13,0.12.0,代号Dragon Ball,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue,Vue 在 JS 社区也打响了知名度。

2015.10.26,1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年,vue-router、vuex、vue-cli 相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。

2016.10.01,2.0.0 是第二个重要的里程碑,它吸收了 React 的虚拟 Dom 方案,还支持服务端渲染。自从Vue 2.0 发布之后,Vue 就成了前端领域的热门话题。

2019.02.05,Vue 发布了 2.6.0 ,这是一个承前启后的版本,在它之后,将推出 3.0.0。

2019.12.05,在万众期待中,尤雨溪公布了 Vue 3 源代码,目前 Vue 3 处于 Alpha 版本。

Vue 3.0 是非常大的重构,源码使用 TypeScript 重写,目前的代码 98% 以上使用 TypeScript 编写。

Vue 3.0

Vue3相对于Vue2的改变体现在源码、性能和语法API这三个方面

1.源码优化

  • 更好的代码管理方式:monorepo
  • 使用typescript重写Vue3,对类型系统更好的支持

2.性能优化

  • 源码体积的减少 首先:移除了一些冷门的feature(filter);其次:引入tree-shaking技术,减少打包体积;tree-shaking技术是依赖于ES2015模板语法的静态结构,通过编译阶段的静态分析,在没有引入的模板上打上标记
  • 响应式系统的升级 通过proxy API重写了响应式系统
  • 编译时的优化 Vue3将vnode的更新性能由于模板大小相关 提升到和 动态节点数量相关

3.语法API的优化---compositionAPI

作用:

  • 优化逻辑组织
  • 优化逻辑复用
  • 拥抱了函数式编程 可以通过函数组合的方式更加优雅的管理和维护我们的代码
options VS composition
  • optionsAPI的特点:对于简单的需求数据方法分离比较清晰,对于相对复杂的功能需要上线反复横跳,维护成本较高
  • composition:将跟一个功能相关的所有内容都放在一个地方维护,还可以将某个功能拆分出去放在一个函数中维护,可以实现逻辑代码的复用。

【小结】

初步认识到了Vue的大致轮廓啦~

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue 3.0
    • 1.源码优化
      • 2.性能优化
        • 3.语法API的优化---compositionAPI
          • options VS composition
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档