来自 Vue 官方团队的 57 个技术分享，请收下！-技术圈

最近在看 Vue 团队成员的技术演讲，从中能了解到他们的设计思考以及最佳实践，看完一场收获颇多。

经过我一番整理，今天给大家介绍一下这些核心团队成员以及他们的技术分享。

他们分别是：

Evan You（尤雨溪）
Eduardo
Kia King Ishii
Anthony Fu
Ben Hong
Thorsten Lünborg
Natalia Tepluhina
Haoqun Jiang（蒋豪群）
HcySunYang（霍春阳）
Damian Dulisz
Rahul Kadyan
Kazupon
Guillaume Chau
Lachlan Miller

分享内容包括：

Vue & Vite 进展与展望
路由与状态管理
composition-api 最佳实践
Vue3 与 TS 支持
编译，工程化与开发者工具
Vue 国际化 i18n
Vue 测试

以下所有技术分享收录在 https://github.com/Leecason/vue-team-talks 持续更新，文末也有链接，英语演讲均有英文字幕，欢迎自取～

Evan You（尤雨溪）

Github：https://github.com/yyx990803

Vue & Vite 祖师爷。

技术分享

主要为 Vue & Vite 进展与展望 相关分享

2022-01-26 New Vue 3 Docs^[1]
2021-11-23 The New Vue^[2]
2021-10-20 One Year Into Vue 3^[3]
2021-05-22 Vue 3 生态进展^[4]
2021-02-26 State of the Vuenion 2021^[5]
2021-02-12 下一代前端工具 ViteJS^[6]
2020-11-05 Vite and VitePress^[7]
2020-02-20 State of the Vuenion 2020^[8]
2019-11-11 Vue 3.0 设计原则^[9]
2019-06-08 Vue 进展^[10]

Eduardo

Github：https://github.com/posva

Vue 核心团队成员，维护 Vue 官方路由，同时也是 pinia 以及 vuefire 的作者。

pinia 是新一代的状态管理器，即 Vuex5.x
vuefire 能绑定 Vue/Vuex 数据与 Firebase 云存储数据库，使两者能实时同步

技术分享

主要为 Vue 路由与 Pinia 状态管理 相关分享

2022-01-27 Beyond State Management with Pinia^[11]
2021-02-26 Tips & Tricks for your Vue 3 applications^[12]
2020-09-17 Exciting New Features for Routing in Vue3; Vue Router 4^[13]
2020-03-03 Get the Most Out of Vue Router^[14]
2020-02-21 Vue-router and its techniques^[15]

Kia King Ishii

Github：https://github.com/kiaking

Vue 核心团队成员，vuex-orm 的作者，维护官方 vitepress 和 vuex。

vuex-orm 是 Vuex 的一个插件，用于支持对 Vuex Store 的对象关系映射访问。

技术分享

主要为 Vuex 状态管理 相关分享

2022-02-11 Vuejs.org New Design^[16]
2021-02-27 Vuex 5 Deep Dive^[17]
2020-09-17 The State of VueX^[18]
2020-02-21 Vuex ORM – Relational data management in Vue^[19]

Anthony Fu

Github：https://github.com/antfu

Vue & Vite 核⼼团队成员，维护 composition-api，同时也是 vitest，slidev，vueuse 等开源项目作者。

vitest 是由 Vite 提供支持的极速单元测试框架，
slidev 是一个为开发者打造，基于 Markdown 的演示文稿工具
vueuse 提供了一些 composition API 常用工具集合

技术分享

主要为 composition-api 与 Vite 相关分享

2022-01-26 Introduction to Vitest^[20]
2021-10-17 新技术和工具如何影响我们编写 Vue 代码的⽅式^[21]
2021-05-22 Composable Vue, 编写可组合可复⽤的 Vue 函数的最佳实践与技巧^[22]
2021-03-28 Develop with Vite | Vite快速入门^[23]
2020-09-26 import { reactive } from 'vue'，浅谈 Vue 3 响应式与组合式 API 的⼀些应⽤^[24]

Ben Hong

Github：https://github.com/bencodezen

Vue 核心团队成员，Vue Mastery 首席讲师，维护 vuejs/docs。

技术分享

主要为 composition-api 相关分享

2021-10-21 Options API vs Composition API: Choosing the Right Approach for Your Team^[25]
2021-02-26 Introduction to Vue 3's Composition API^[26]

Thorsten Lünborg

Github：https://github.com/LinusBorg

Vue 核心团队成员，对 Vue 许多项目都有贡献，portal-vue 作者（也就是 Vue3 的内置组件）。

技术分享

主要为 Vue3 与 TS 支持，composition-api 相关分享

2021-02-26 Vue 3 and Typescript^[27]
2020-02-20 Composition API Best Practices^[28]

Natalia Tepluhina

Github：https://github.com/NataliaTepluhina

Vue 核心团队成员，维护官方 vuejs/docs 和 vue-cli。

技术分享

分享内容包括 Vue Apollo，状态管理，composition-api 和测试等 多方面

2021-11-23 7 ways to make your Vue unit tests better^[29]
2021-10-20 Local State and Server Cache: Finding a Balance^[30]
2021-04-14 The Vue 3 Composition API^[31]
2021-02-26 Spin the wheel: building a truly reusable composable^[32]
2020-09-17 Migrating a big old codebase to Vue 3: what I’m excited about^[33]
2020-03-03 All You Need Is Apollo Client^[34]
2020-02-20 You might not need Vuex^[35]
2019-11-11 How to build beautiful Vuesualizations without being a scientist^[36]

Haoqun Jiang（蒋豪群）

Github：https://github.com/sodatea

Vue & Vite 核心团队成员，维护 vue-cli，create-vue 等 Vue 工程化相关生态。

技术分享

主要为 Vue 工程化 相关分享

2022-02-11 The New to Create Vue Projects^[37]
2021-05-22 面向新一代构建工具优化代码^[38]
2021-02-27 Managing Complexity in Vue CLI^[39]
2019-06-08 Vue Beyond Vue Loader^[40]
2019-08-17 Vue 高效开发之路^[41]
2019-10-26 谈谈技术项目的可维护性
2019-08-28 现代前端框架如何提高你的效率
2019-05-07 AST 与前端框架的工程化^[42]

HcySunYang（霍春阳）

Github：https://github.com/HcySunYang

Vue 核心团队成员，负责维护 Vue3 框架，并将 Vue3 设计理念出版成书 —— 《Vue.js设计与实现》 ，2022 年前端进阶必看，同时也是开源项目 vuese 作者。

vuese 能为 vue 组件自动生成文档，是组件文档的一站式解决方案

技术分享

主要为 Vue 编译 相关分享

2021-05-22 把 Vue SFC 编译成 X^[43]

Damian Dulisz

Github：https://github.com/shentao

Vue 核心团队成员，维护 Vue 官方新闻 news.vuejs.org，也是 vue-multiselect，vue-global-events 的作者，参与维护 vuelidate。

vue-multiselect 是一套完整的 Vue 选择器解决方案，覆盖各种选择场景
vue-global-event 将全局事件注册为一个组件，能快捷地监听页面上任何地方的事件
vuelidate 是一个简单，轻量的 Vue 表单校验工具

技术分享

主要为 composition-api 与 vuelidate 相关分享

2021-03-10 Intro to Composition-API^[44]
2020-02-20 Vuelidate version for Vue 3.0^[45]

Rahul Kadyan

Github：https://github.com/znck

Vue 核心团队成员，vuedx 及周边生态作者。

vuedx 是一组提升开发者 IDE 开发体验的工具集

技术分享

主要为 Vue 开发体验与编译 相关分享

2021-02-27 State of DX^[46]
2020-09-17 Experience of the new Vue^[47]
2020-02-21 New Vue. New Compiler. Let’s unbox^[48]

Kazupon

Github：https://github.com/kazupon

Vue 核心团队成员，维护 Vue 的国际化生态，vue-i18n-next，vue-i18n，vue-cli-plugin-i18n，eslint-plugin-vue-i18n 的作者，Github 国际化组织 intlify 创建者，日本最大的 Vue 社区 vuejs-jp 组织者。

技术分享

主要为 Vue 国际化 i18n 相关分享

2021-02-27 State of Vue i18n^[49]

Guillaume Chau

Github：https://github.com/Akryum

Vue 核心团队成员，维护官方 vue devtools，vue-cli，同时也是 vue-apollo，vue-virtual-scroller，floating-vue 的作者。

vue-apollo 支持在 Vue.js 应用中集成 GraphQL
vue-virtual-scroller 是长列表虚拟滚动 Vue 解决方案
floating-vue 能方便地在 Vue 中创建弹出元素，比如 tooltips, popovers, dropdown, menus 等

技术分享

主要为 Vue 开发者工具 相关分享

2021-02-26 Extensible devtools^[50]
2020-09-18 Maintaining OSS like vue-cli, vue-devtools, vue-apollo and more!^[51]
2020-02-21 Announcement related to Vue CLI UI^[52]

Lachlan Miller

Github：https://github.com/lmiller1990

Vue 核心团队成员，专注于为 Vue 生态构建测试工具。维护官方 test-utils 和 vue-jest。电子书 Vue 测试手册｜ Vue Testing Handbook^[53] 作者。

技术分享

主要为 Vue 测试 相关分享

2021-01-30 7 Vue Patterns That You Should Be Using More Often^[54]
2020-11-07 Testing Vue 3 Apps: What's new in Vue Test Utils for Vue 3^[55]
2020-09-30 Testing Vue 3 apps with Vue Test Utils^[56]

所有技术分享收录在 https://github.com/Leecason/vue-team-talks 持续更新，欢迎 star 或 watch。

谢谢支持❤️

如果觉得有用，就点赞、在看、分享吧，谢谢大家啦～

参考资料

[1]

2022-01-26 New Vue 3 Docs: https://www.youtube.com/watch?v=OXKefYhCVyw

[2]

2021-11-23 The New Vue: https://www.youtube.com/watch?v=2KBHvaAWJOA&list=PLRxahvbQSa_v9nKUI_UOiRPG7IOnq7b7Y

[3]

2021-10-20 One Year Into Vue 3: https://www.youtube.com/watch?v=jTxHtDAnd6E

[4]

2021-05-22 Vue 3 生态进展: https://www.youtube.com/watch?v=On6V97n_iEE

[5]

2021-02-26 State of the Vuenion 2021: https://www.youtube.com/watch?v=El8Jw2CFj7g&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF

[6]

2021-02-12 下一代前端工具 ViteJS: https://www.bilibili.com/video/BV1kh411Q7WN

[7]

2020-11-05 Vite and VitePress: https://www.youtube.com/watch?v=xXrhg26VCSc

[8]

2020-02-20 State of the Vuenion 2020: https://www.youtube.com/watch?v=3COrQGxnPv0&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=28

[9]

2019-11-11 Vue 3.0 设计原则: https://www.youtube.com/watch?v=WLpLYhnGqPA

[10]

2019-06-08 Vue 进展: https://www.youtube.com/watch?v=AnoZheeH0Nk

[11]

2022-01-27 Beyond State Management with Pinia: https://www.youtube.com/watch?v=eflJ3VQZi6g

[12]

2021-02-26 Tips & Tricks for your Vue 3 applications: https://www.youtube.com/watch?v=4KaakDai-3k

[13]

2020-09-17 Exciting New Features for Routing in Vue3; Vue Router 4: https://www.youtube.com/watch?v=T5ZGRVxVm-A&list=PLCxzy-hmQq9HOg0mS0laLkMiTov2zyZ5q&index=17

[14]

2020-03-03 Get the Most Out of Vue Router: https://www.youtube.com/watch?v=l9vvRqZ80vM&list=PLJNLwTPak6dgjZQOa9jroWZF4Ze9jlEZL&index=13

[15]

2020-02-21 Vue-router and its techniques: https://www.youtube.com/watch?v=ysTn4XmFqNo&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=21

[16]

2022-02-11 Vuejs.org New Design: https://www.youtube.com/watch?v=QJPnrTMTGt8&list=PLCxzy-hmQq9GorRHGMurhHZb1KRdWUiYk&index=2

[17]

2021-02-27 Vuex 5 Deep Dive: https://www.youtube.com/watch?v=WmgQH4pOhUc&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=6

[18]

2020-09-17 The State of VueX: https://curatedtalks.com/watch/kia-king-the-state-of-vue-x-at-vuejs-global

[19]

2020-02-21 Vuex ORM – Relational data management in Vue: https://www.youtube.com/watch?v=wH_K5jmDALY&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=13

[20]

2022-01-26 Introduction to Vitest: https://www.youtube.com/watch?v=CW9uTys0li0

[21]

2021-10-17 新技术和工具如何影响我们编写 Vue 代码的⽅式: https://www.youtube.com/watch?v=CyaJLrqE9tc

[22]

2021-05-22 Composable Vue, 编写可组合可复⽤的 Vue 函数的最佳实践与技巧: https://www.youtube.com/watch?v=84tk3XlS71c

[23]

2021-03-28 Develop with Vite | Vite快速入门: https://www.youtube.com/watch?v=xx8gEHet6n8

[24]

2020-09-26 import { reactive } from 'vue'，浅谈 Vue 3 响应式与组合式 API 的⼀些应⽤: https://antfu.me/posts/binfe-2020-zh

[25]

2021-10-21 Options API vs Composition API: Choosing the Right Approach for Your Team: https://www.youtube.com/watch?v=C-av38HquXU

[26]

2021-02-26 Introduction to Vue 3's Composition API: https://www.youtube.com/watch?v=fU1cV46aYEw&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=3

[27]

2021-02-26 Vue 3 and Typescript: https://www.youtube.com/watch?v=UxKMydqv0Fo&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=22

[28]

2020-02-20 Composition API Best Practices: https://www.youtube.com/watch?v=6D58SI9P-aU&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=14

[29]

2021-11-23 7 ways to make your Vue unit tests better: https://www.youtube.com/watch?v=L_BK8zXGdBM

[30]

2021-10-20 Local State and Server Cache: Finding a Balance: https://www.youtube.com/watch?v=kJTfHJcIIxc

[31]

2021-04-14 The Vue 3 Composition API: https://www.youtube.com/watch?v=l12xx0N46KY

[32]

2021-02-26 Spin the wheel: building a truly reusable composable: https://www.youtube.com/watch?v=yynmJ_3Sx2M&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=8

[33]

2020-09-17 Migrating a big old codebase to Vue 3: what I’m excited about: https://www.youtube.com/watch?v=K1JoWmXh4qA&list=PLCxzy-hmQq9HOg0mS0laLkMiTov2zyZ5q&index=3

[34]

2020-03-03 All You Need Is Apollo Client: https://www.youtube.com/watch?v=tXPvgWrLmeQ&list=PLJNLwTPak6dgjZQOa9jroWZF4Ze9jlEZL&index=3

[35]

2020-02-20 You might not need Vuex: https://www.youtube.com/watch?v=sjB6wamZQN0&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=30

[36]

2019-11-11 How to build beautiful Vuesualizations without being a scientist: https://www.youtube.com/watch?v=_lSPeCSCfh8

[37]

2022-02-11 The New to Create Vue Projects: https://www.youtube.com/watch?v=V3JGZazdJwE&list=PLCxzy-hmQq9GorRHGMurhHZb1KRdWUiYk&index=3

[38]

2021-05-22 面向新一代构建工具优化代码: https://www.bilibili.com/video/BV1Jo4y117LA/

[39]

2021-02-27 Managing Complexity in Vue CLI: https://www.youtube.com/watch?v=Y-1y0JjflOU&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=5

[40]

2019-06-08 Vue Beyond Vue Loader: https://www.youtube.com/watch?v=reNHZrUGquM

[41]

2019-08-17 Vue 高效开发之路: https://zdk.f2er.net/wx/detail/5d59c538f0360d2cc1ba6ec5

[42]

2019-05-07 AST 与前端框架的工程化: https://www.infoq.cn/article/qkaibf_1edauwzpydpt0

[43]

2021-05-22 把 Vue SFC 编译成 X: https://www.youtube.com/watch?v=98kTtXrjnWg

[44]

2021-03-10 Intro to Composition-API: https://www.youtube.com/watch?v=5QNz2tXnFlY

[45]

2020-02-20 Vuelidate version for Vue 3.0: https://www.youtube.com/watch?v=5-Z-EmTnDyU&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=23

[46]

2021-02-27 State of DX: https://www.youtube.com/watch?v=dh7Mj0cCVjY&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=4

[47]

2020-09-17 Experience of the new Vue: https://www.youtube.com/watch?v=i9bW2IdA8r0&list=PLCxzy-hmQq9HOg0mS0laLkMiTov2zyZ5q&index=27

[48]

2020-02-21 New Vue. New Compiler. Let’s unbox: https://www.youtube.com/watch?v=k-mSbrj_fjU&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=25

[49]

2021-02-27 State of Vue i18n: https://www.youtube.com/watch?v=7yaY1UDhhsk&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=7

[50]

2021-02-26 Extensible devtools: https://www.youtube.com/watch?v=bq-kv_i6WIk&list=PLCxzy-hmQq9Ev1wUhS49uBAPo-AwzkvfF&index=19

[51]

2020-09-18 Maintaining OSS like vue-cli, vue-devtools, vue-apollo and more!: https://www.youtube.com/watch?v=Ow0W3Nc9mD4&list=PLCxzy-hmQq9HOg0mS0laLkMiTov2zyZ5q&index=11

[52]

2020-02-21 Announcement related to Vue CLI UI: https://www.youtube.com/watch?v=GNW39QLvCU0&list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn&index=18

[53]

Vue 测试手册｜ Vue Testing Handbook: https://lmiller1990.github.io/vue-testing-handbook/v3/

[54]

2021-01-30 7 Vue Patterns That You Should Be Using More Often: https://www.youtube.com/watch?v=muaBCsVE-NM

[55]

2020-11-07 Testing Vue 3 Apps: What's new in Vue Test Utils for Vue 3: https://www.youtube.com/watch?v=Tvnn93q6-so

[56]

2020-09-30 Testing Vue 3 apps with Vue Test Utils: https://www.youtube.com/watch?v=0lV4dVYOyBw&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：

点个「喜欢」或「在看」，让更多的人也能看到这篇内容
我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个喜欢支持我吧，在看就更好了