尤大直播分享:vue3生态进展和展望

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12

前言

10月23日,参加了前端早早聊组织的【vue生态专场】,准备写一波分享方便大家学习。早上有4个话题:volar开发搭建平台组件开发和维护尤大分享vue生态进展和展望小姐姐分享gogocode迁移老项目。干货很多,这里先分享一下小右带来的一些新消息,感觉和我们写代码关系最大。

为什么还不是默认版本?

就很快!要等大部分生态跟上才行,显然现在已经准备就绪了。

42b4ccb889972a25451fb2cda02051c0.png

更详细解释“软着陆”的原因:

  • vue3需要时间变得稳定

  • 生态需要时间跟上

  • 在成为默认版本之前需要打磨vue3

c60b84050d5d63c73a712779c6f1528f.png
f

大版本升级的原因

  • 正确的架构设计

  • 产出新的基础功能

  • 摆脱技术债

d78ad9fa2eb2d812390ec66c7f32131d.png

大版本升级需要考虑的一些因素

  • 向后兼容

  • 易升级

  • 实现和维护成本

  • 改进程度

9842f73ccbd5d5e3c4cb5d580cd7b6d1.png
image-2021102310223550

vue3如何在成本和改进程度中取舍

  • 主要改进

64c795a5bee0affd5ab5670418c72252.png
f

vue3完成体到来,转折点也要来了

0ec24ce350f2395bb384f31cd31a8cf8.png
image-2021102310444299

其实很多时间都花在vite上面了,全新开发生态

30cb76134c9bb224622961c61c6c314d.png
image-202110230534685

欧美市场没有支持IE11的必要了

5b40fcccfe173a14a6c99bef5c10fbc7.png
image-2021102110614493

vue3生态已经跟上来啦!

  • nuxt3:这个尤大多次强力推荐,我以前使用nuxt2也觉得贼6,准备做一波分享,欢迎大家关注我B站

  • VueUse:针对vue3 composition api的工具库

  • 兼容vue3的组件库

  • Ionic等移动端框架

8523c20c34a63d7e6ba16f5de6ad7450.png
image-2021102110658127
3236413d60d266347e0ee23db754e3cc.png
image-2021102310733837
7300b93897a177142604679c5a7d0469.png
image-2021123110845884
d4b3b749ea482f3c88c64ebb2a26818d.png
image-202110230931902

vue3在持续变好

  • script setup成为正式功能,赶紧用!

  • style v-bind成为正式功能

  • defineCustomElement:可以用vue写组件库,输出为原生组件,可以用在其他框架中,可用于微前端

  • reactivity性能提升明显,大应用会更明显

  • effectScope API:用在高级应用中,比如VueUse,penia,状态管理库非常推荐大家使用pinia

  • ref转换

  • props转换

5d72cd5f19609128b98588a624e477b7.png

Ref Transform

这个说了很多,花费好几页,还有代码演示,可见尤大很重视,不过这样的语法会不会又引起腥风血雨般的讨论?

演示了$语法糖,有了它可以忘了.value

0eedb99d75f2db05fd87c35c1a31375b.png

演示$$使用,通常用于hooks编写

556736518eb122ac1312107eefc8f2f5.png

结构props转换

又演示了另一个开发痛点是关于属性解构会导致的心智负担问题,通过props transform即可解决。

比如下面代码中对属性做解构之后,甚至可以设置默认值,起别名,和rest展开,可以看到foo是响应式的,秀的一批。

92bafa38648d9e3054e484bcf4b8dc4c.png

桥接到vue2

让大家可以在vue2中享受vue3的开发体验:

  • 迁移创建版本:@vue/compat,一个vue3创建版本提供可配置的vue2兼容行为

  • vue-demi:为vue2、vue3编写通用库

  • vite-plugin-vue2:vite中写vue2

  • unplugin-script-setup-vue2:vue2中使用script setup

  • vue 2.7:披着vue3外壳的vue2

80294e5b6f0df2bd3ccfb18f8fc589a1.png

新文档

  • 暗黑模式

  • 基于vitepress

  • 升级建议和最佳实践:最新功能推荐,不会错过新东西

  • 重新组织学习路线

d917bbe8312eba2231b7af97d8536282.png

新官网

官网也会升级,包括大量重写的向导、随意切换新旧API,新案例,新模块等

b1ea6a213b8bfead437be78c683f7887.png

随意切换options api和composition api

2b609dfac57221b3cb261bead6d85a32.png

所见即所得!

1eb8c3491ef4bc9f0d7843ecb8506fc8.png

最后变化总结

  • 新文档马上上

  • 官网默认vue3

  • npm latest标签指向vue3

  • github上会分开

    • 保留issue链接

    • vue-next会重命名为core

4bb0316cfe6b540292f2123e3016583d.png

小意外

尤大在新加坡的酒店大堂做直播,生怕有人凑过来还要戴口罩。结果中间还是意外掉线了,等恢复了发现已经讲完了,尤大瞬间崩了,显然第二遍讲加快了速度,以至于我们听得有点不够爽,但还是再次感谢他的分享,祝他在新加坡生活愉快!

3f279ad132052ea778303bf03aaa6a96.png

Q&A环节

vue2还会维护吗?

2.7将会是vue2最后一个小版本,在维护18个月,之后彻底进入

vue3还会有变化吗?

主要是ssr前提下进一步优化客户端性能

巨型vue2如何升级vue3

有欧美分享,大家搜一下。下午也有个分享做这个。

新加坡感觉如何

吃的东西多,随便点,非常开心!

Vite未来规划

目前稳定,没重大改动,稳定ssr实现;很多基于vite做底层的生态在兴起,vite会做成对前端生态有帮助的东西。

pinia会替代vuex吗

很大概率,都是core team成员,讨论结果未来形态会很像pinia,新东西都写在pinia里,如果开发一个新项目,如果使用ts,推荐使用pinia。

如何评价自由职业

自由很理想,很爽,命运掌握在自己手里;同时压力在自己身上,没有公司兜底,选择了就要做好承受这些的准备。


最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。

推荐阅读

1个月,200+人,一起读了4周源码
我历时3年才写了10余篇源码文章,但收获了100w+阅读

尤雨溪写的100多行的“玩具 vite”,十分有助于理解 vite 原理

老姚浅谈:怎么学JavaScript?

我在阿里招前端,该怎么帮你(可进面试群)

81d37aeae760e90c95f077f32637ebca.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动

22ff6b2b1ed3d03c88c48fc477de8211.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用Python查看微信共同好友

思路 首先通过itchat这个微信个人号接口扫码登录个人微信网页版,获取可以识别好友身份的数据。这里是需要分别登录两人微信的,拿到两人各自的好友信息存到列表中。 这样一来,查共同好友就转化成了查两个列表中相同元素的问题。获取到共同好友…

女生适合学ux吗_UX设计色彩心理学,理论与可访问性

女生适合学ux吗Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be purpose behin…

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12想学源码,极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

视觉测试_视觉设计流行测验

视觉测试重点 (Top highlight)I often discuss the topic of improving visual design skills with junior and mid-level designers. While there are a number of design principles the designers should learn and practice, one important skill that is not often consid…

如何给开源项目提过 PR 呢?其实很简单

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12源码共读群里有小伙伴聊到如何给开源项目提PR,所以今天分享这篇文章。你有给开源的库或者框架提过 PR 吗?如果没有,那么今天的文章会教你怎么…

一次回母校教前端的经历

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12已进行了三个月,很多小伙伴都表示收获颇丰。分享一篇武大毕业的耀耀大佬的文章。有些时候会受限于环境影响,特别是在校大学生。所以要融入到积极上进的环…

设计插画工具_5个强大的设计师插画工具

设计插画工具As Product Designers, most likely, we have come across illustrative work. Visual design is one important element in enhancing the user experience. As many gravitate toward attractive looking products, designers are also adapting to the changing…

figma下载_切换到Figma并在其中工作不必是火箭科学,这就是为什么

figma下载We have seen Elon Musk and SpaceX making Rocket Science look like a child’s play. In the same spirit, should design tools be rocket science that is too hard to master? Not at all.我们已经看到埃隆马斯克(Elon Musk)和SpaceX使Rocket Science看起来像是…

npm、yarn、cnpm、pnpm 使用操作都在这了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12有时候想查个命令,或者换个镜像找了几篇文章才找到,最近闲着没事干,干脆整理一篇文档,以后就不用在网上瞎搜有的还写不全。Usage…

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、…

初级爬虫师_初级设计师的4条视觉原则

初级爬虫师重点 (Top highlight)Like many UXers, I got into the industry from a non-visual background (in my case it was Business and later on Human Cognition). Even though I found great benefits coming from those backgrounds, it also meant I had no UI/Visua…

开源监控解决方案OpenFalcon系列(一)

OpenFalcon是由小米的运维团队开源的一款企业级、高可用、可扩展的开源监控解决方案,,在众多开源爱好者的支持下,功能越来越丰富,文档更加的完善,OpenFalcon 已经成为国内最流行的监控系统之一。小米、美团、金山云、快…

如何利用 webpack 在项目中做出亮点

大家好,我是若川。最近这几年,在前端代码打包器领域内,webpack 算得上是时下最流行的前端打包工具。它可以分析各个模块的依赖关系,最终打包成我们常见的静态文件:.js 、 .css 、 .jpg 、.png,极大地提升了…

Github 王炸功能!Copilot 替代打工人编程?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。大家好,我是皮汤。最近组里在讨论一个有意思的工具 Github Copilot&#xff…

ux和ui_糟糕的UI与UX番茄酱模因

ux和uiAt face value, this meme appears to be a quick and easy tool for educating the general public about what the differences are between UI and UX. You might look at the attractive glass bottle labeled “UI” and understand that UI might have to do more …

Linux中的wheel用户组是什么?

在Linux中wheel组就类似于一个管理员的组。 通常在Linux下,即使我们有系统管理员root的权限,也不推荐用root用户登录。一般情况下用普通用户登录就可以了,在需要root权限执行一些操作时,再su登录成为root用户。但是,任…

ElementUI 组件库 md-loader 的解析和优化

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。背景相信很多同学在学习 webpack 的时候,对 loader 的概念应该有所了解&…

csdn 用户 蚂蚁翘大象_用户界面设计师房间里的大象

csdn 用户 蚂蚁翘大象Once upon a time, an educated eye detected a new trend in UI designs, particularly, in Dribbble. It was a conceptual proposition, not an actual design for a customer or an app. Trying to explain the characteristics of this new trend, a …

面试官问发布订阅模式是在问什么?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。本文来自 simonezhou 小姐姐投稿的第八期笔记。面试官常问发布订阅、观察者模式&#…

figma下载_不用担心Figma中的间距

figma下载重点 (Top highlight)I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, continuous checking of the bottom or in-between space for…