来自 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 的内置组件 <Teleport>）。

技术分享

主要为 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