大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12
前言
10月23日,参加了前端早早聊组织的【vue生态专场】,准备写一波分享方便大家学习。早上有4个话题:volar开发,搭建平台组件开发和维护,尤大分享vue生态进展和展望,小姐姐分享gogocode迁移老项目。干货很多,这里先分享一下小右带来的一些新消息,感觉和我们写代码关系最大。
为什么还不是默认版本?
就很快!要等大部分生态跟上才行,显然现在已经准备就绪了。
![42b4ccb889972a25451fb2cda02051c0.png](https://i-blog.csdnimg.cn/blog_migrate/c8a322580a67db7912e02d10a0a0d24e.png)
更详细解释“软着陆”的原因:
vue3需要时间变得稳定
生态需要时间跟上
在成为默认版本之前需要打磨vue3
![c60b84050d5d63c73a712779c6f1528f.png](https://i-blog.csdnimg.cn/blog_migrate/ff3da917c8ee533b6df7d35c44a22379.png)
大版本升级的原因
正确的架构设计
产出新的基础功能
摆脱技术债
![d78ad9fa2eb2d812390ec66c7f32131d.png](https://i-blog.csdnimg.cn/blog_migrate/4bdc76e1083ac38f5f6d2040dc27088c.png)
大版本升级需要考虑的一些因素
向后兼容
易升级
实现和维护成本
改进程度
![9842f73ccbd5d5e3c4cb5d580cd7b6d1.png](https://i-blog.csdnimg.cn/blog_migrate/ec7e78e5f9797501983441269e24643b.png)
vue3如何在成本和改进程度中取舍
主要改进
![64c795a5bee0affd5ab5670418c72252.png](https://i-blog.csdnimg.cn/blog_migrate/db6a2a91f74f6e3c1ffa6ab341fdf22e.png)
vue3完成体到来,转折点也要来了
![0ec24ce350f2395bb384f31cd31a8cf8.png](https://i-blog.csdnimg.cn/blog_migrate/0b0b34d9db20257855621b44282700f1.png)
其实很多时间都花在vite上面了,全新开发生态
![30cb76134c9bb224622961c61c6c314d.png](https://i-blog.csdnimg.cn/blog_migrate/c7730cdaccad5f74c715031de01bbb70.png)
欧美市场没有支持IE11的必要了
![5b40fcccfe173a14a6c99bef5c10fbc7.png](https://i-blog.csdnimg.cn/blog_migrate/add1682314baf97d9afb52a7d0bf4af0.png)
vue3生态已经跟上来啦!
nuxt3:这个尤大多次强力推荐,我以前使用nuxt2也觉得贼6,准备做一波分享,欢迎大家关注我B站
VueUse:针对vue3 composition api的工具库
兼容vue3的组件库
Ionic等移动端框架
![8523c20c34a63d7e6ba16f5de6ad7450.png](https://i-blog.csdnimg.cn/blog_migrate/eeed13e94829acb89ae2ddc22a151525.png)
![3236413d60d266347e0ee23db754e3cc.png](https://i-blog.csdnimg.cn/blog_migrate/bd6bac1ccf3094a20117591f39e9c777.png)
![7300b93897a177142604679c5a7d0469.png](https://i-blog.csdnimg.cn/blog_migrate/91a0c42503540c5dfe4419faadc4490e.png)
![d4b3b749ea482f3c88c64ebb2a26818d.png](https://i-blog.csdnimg.cn/blog_migrate/0e9afb4bc57ba008ece828cea73d639f.png)
vue3在持续变好
script setup
成为正式功能,赶紧用!style v-bind成为正式功能
defineCustomElement:可以用vue写组件库,输出为原生组件,可以用在其他框架中,可用于微前端
reactivity性能提升明显,大应用会更明显
effectScope API:用在高级应用中,比如VueUse,penia,状态管理库非常推荐大家使用pinia
ref转换
props转换
![5d72cd5f19609128b98588a624e477b7.png](https://i-blog.csdnimg.cn/blog_migrate/4d1ad81f420715d73fc3caa727825c16.png)
Ref Transform
这个说了很多,花费好几页,还有代码演示,可见尤大很重视,不过这样的语法会不会又引起腥风血雨般的讨论?
演示了$语法糖,有了它可以忘了.value
![0eedb99d75f2db05fd87c35c1a31375b.png](https://i-blog.csdnimg.cn/blog_migrate/6a5d5a48263ad8e069bcdf6232339ea2.png)
演示$$使用,通常用于hooks编写
![556736518eb122ac1312107eefc8f2f5.png](https://i-blog.csdnimg.cn/blog_migrate/ffc2ce439915befdb3cade503378b2e6.png)
结构props转换
又演示了另一个开发痛点是关于属性解构会导致的心智负担问题,通过props transform即可解决。
比如下面代码中对属性做解构之后,甚至可以设置默认值,起别名,和rest展开,可以看到foo是响应式的,秀的一批。
![92bafa38648d9e3054e484bcf4b8dc4c.png](https://i-blog.csdnimg.cn/blog_migrate/cb687c0569af7af37a59c93a8d6ce4a6.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](https://i-blog.csdnimg.cn/blog_migrate/b2a0648448231ab411004b1241b63312.png)
新文档
暗黑模式
基于vitepress
升级建议和最佳实践:最新功能推荐,不会错过新东西
重新组织学习路线
![d917bbe8312eba2231b7af97d8536282.png](https://i-blog.csdnimg.cn/blog_migrate/857ca122d02a5ff70b1641b58f41c428.png)
新官网
官网也会升级,包括大量重写的向导、随意切换新旧API,新案例,新模块等
![b1ea6a213b8bfead437be78c683f7887.png](https://i-blog.csdnimg.cn/blog_migrate/b65df61f234d9d6eeeddec51670e6181.png)
随意切换options api和composition api
![2b609dfac57221b3cb261bead6d85a32.png](https://i-blog.csdnimg.cn/blog_migrate/7dec24f87477160342b123ee32651ef9.png)
所见即所得!
![1eb8c3491ef4bc9f0d7843ecb8506fc8.png](https://i-blog.csdnimg.cn/blog_migrate/da65fa1c2ddeb50fbed707dea92fb97d.png)
最后变化总结
新文档马上上
官网默认vue3
npm latest标签指向vue3
github上会分开
保留issue链接
vue-next会重命名为core
![4bb0316cfe6b540292f2123e3016583d.png](https://i-blog.csdnimg.cn/blog_migrate/0894836881b615a43f33c99aa02d4329.png)
小意外
尤大在新加坡的酒店大堂做直播,生怕有人凑过来还要戴口罩。结果中间还是意外掉线了,等恢复了发现已经讲完了,尤大瞬间崩了,显然第二遍讲加快了速度,以至于我们听得有点不够爽,但还是再次感谢他的分享,祝他在新加坡生活愉快!
![3f279ad132052ea778303bf03aaa6a96.png](https://i-blog.csdnimg.cn/blog_migrate/74b8e4bd2ccd2cca57f51ed798a0f4e8.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 原理
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~