vue-next已正式更名为core,Vue3即将转正迎来春天

46,386

「2022 年什么会火?什么该学?本文正在参与“聊聊 2022 技术趋势”征文活动 」

什么会火

要说2022年什么会火?我的觉得Vue3会是其中之一吧!

原因是,这两天vue-next项目以正式更名为core,标志着Vue3即将转正迎来春天

可以看到现在vuejs Pinned的项目

image.png

  • core :26.9k stars,就是之前的vue-next,即Vue3 虽然安装方式还是npm init vue@latestyarn create vue,但是以更名为core,说明它已经成为近期最核心的宠儿
  • docs Vue3的中文文档,1.5k stars
  • create-vue :522 stars,是一个新项目,用一种更简便的方式创建Vue项目

比如创建Vue3项目使用npm init vue@3,创建Vue2项目可使用npm init vue@2

  • router :Vue的官方路由,之前的vue-router-next,1.7k stars,
  • pinia :4.9k stars,是Vue新一代的状态管理器,像是Vuex5.x的实现,挂在这不知道会是否想用它取代之前的Vuex
  • devtools :vue的调试工具,21.6k stars

可以看出所有都在打辅,视乎所有的目光都聚焦于Vue3。也是并且经过一年多沉淀,Vue3生态已经相当稳定了,相信2022越来越多的公司也会选择Vue3

也许你的同事会问:为什么用Vue3啊?用之前的Vue2不是挺好的吗?

我思考了许久,确实老项目可以考虑不用,但是新项目可以考虑上了,我简单小结为以下6点Vue2所没有的优势

Vue3的6个优势

1. Vue3使用TS重构了项目,获得更好的类型支持

2. 重构了响应式系统

Vue3使用Proxy替换Object.defineProperty,重构了Vue的响应式系统;解决了Vue2.x中存在的响应性问题

包括:

  • 可的直接监听数组类型的数据变化
  • 监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升
  • 更强大的拦截功能,拦截器包括getsethasdeletePropertyownKeysgetOwnPropertyDescriptordefinePropertypreventExtensionsgetPrototypeOfisExtensiblesetPrototypeOfapplyconstruct13种

3. 引入了Composition API

vue3.0中引入了composition API,专门用于解决功能、数据和业务逻辑分散的问题,使项目更益于模块化开发以及后期维护

它的核心是setup函数,这样做的好处是,当应用变得复杂一点时,我可以将功能对应的数据和业务逻辑抽离出来,需要是import,以至于更好的逻辑复用和代码组织

4. 优化了Virtual DOM

包括:

  • 模板编译时的优化;将一些静态节点编译成常量
  • slot优化;将slot编译为lazy函数,将slot的渲染的决定权交给子组件
  • 模板中内联事件的提取并重用(原本每次渲染都重新生成内联函数)

5. 更好的Tree shaking

引入尤大的原话:

Tree-shaking其实就是把无用的模块进行“剪枝”,很多没有用到的API就不会打包到最后的包里

事实上,Tree shaking并不是Vue3新增的东西,它是打包工具如webpack或者rollup的功能,但是由于Vue3代码结构调整,把vue本身当一个对象去操作,这样的结果是,使得一些可能不会用到的功能就可以被tree shaking掉,从而使得体积更小

主要原理:依赖es6的模块化的语法,将无用的代码(dead-code)进行剔除

6. <script setup>

<script setup>是Vue3.2新增的语法糖,消除我们在使用compositionAPI时的心智负担,让我们没有理由不使用compositionAPI

优势:

  • 更简洁
  • 能够使用纯TS声明props和抛出事件
  • 更好的运行时性能和IDE类型推断性能

以上就是对比Vue2,Vue3的几个优势

那如何学Vue呢

如何学

个人推荐视频+文档+文章方式

视频可以快速入门,文档可以让你系统、全面的了解Vue,文章是前人的一些总结和分享

这里分享我个人的收藏夹,包括文章30+和视频14+两大类,文章大部分来源于掘金

注:

  • 以下来自网上公开资料个人收藏的,排名不分先后
  • 如有问题,请留意告知

文章

  1. Vue RFCs
  2. Vue3中文文档
  3. 如何参加开源项目-如何给Vue3.0提PR
  4. 史上最全 Vue 前端代码风格指南
  5. 101张脑图,从零开始学完Vue3(包括Vue3.2最新语法)
  6. 实现最简 vue3 模型
  7. [Vue官方教程笔记]- 尤雨溪手写mini-vue
  8. 10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)
  9. 10.23尤雨溪在早早聊直播分享总结:vue3生态发展现状和展望
  10. 2021必知必会的vite+vue3项目最佳实践
  11. 分享8个非常实用的Vue自定义指令
  12. 服务端渲染SSR及实现原理
  13. 组件库从0到1
  14. Vue3.0 新特性以及使用经验总结
  15. 从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境
  16. Vue3 究竟好在哪里?(和 React Hook 的详细对比)
  17. 学习 vue3 源码的利器
  18. Vue3 的响应式和以前有什么区别,Proxy 无敌?
  19. Vue3 中的数据侦测
  20. 聊一聊 Vue3 的 9 个知识点
  21. Vue3的8种和Vue2的12种组件通信
  22. 推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目
  23. 阿里妈妈又做了新工具,帮你把 Vue2 代码改成 Vue3 的
  24. Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架
  25. 30 道 Vue 面试题,内含详细讲解
  26. 还在迟疑是否上ts?先上车再说!vue3+ts开发初体验
  27. Vue3.2 setup语法糖、Composition API归纳总结
  28. 最全的 Vue 面试题+详解答案
  29. Vue3.0 前的 TypeScript 最佳入门实践
  30. 实战技巧,Vue原来还可以这样写
  31. 尤雨溪手写mini-vue

视频

  1. Vue3快速上手指南-CompositionAPI
  2. 尤雨溪教你写vue 高级vue教程 源码分析
  3. 手把手教你学Vue3
  4. Composition API + 深度解读
  5. React 与 Vue 框架的设计思路大 PK
  6. vue3 源码的利器 - mini-vue
  7. 8年老前端独家分享阅读 Vue3 源码技巧
  8. Vue3.0光速上手
  9. Vite2 + Vue3项目最佳实践
  10. Vue3+Typescript从整合到项目实战
  11. Vue DevUI开源指南
  12. 半小时学会 Vuex 数据共享
  13. 下一代Vue状态管理工具—Pinia
  14. 面向未来的 Vuex -- pinia

结语

以上就是本文的所有内容,欢迎点赞收藏❤


以下补更,修改时间:2022年1月21日12:09:19

一早起来,就看到尤大昨晚22点26分在知乎以及微博、官网官宣了

Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本

image.png

image.png

image.png

快,一起学起来吧~