Vant 是有赞前端团队开源的一套轻量、可靠的移动端组件库。在 Vue 3 发布后，我们第一时间进行跟进，基于 Vue 3 对 Vant 的核心组件和周边生态进行了重构。本次分享将介绍基于 Vue 3 重构 Vant 组件库的实践经验，带大家逐步了解 Vue 3 给组件开发带来的改变和收益。

演讲提纲：

1. 背景介绍
   • 介绍 Vant 组件库现状
   • 介绍本次重构的背景和目标
2. 重构过程：如何一步步基于 Vue 3 进行重构
   • 快速将 Vue 2 代码迁移至 Vue 3
   • 基于组合式 API 和 TypeScript 重构和抽象组件
3. 衡量重构带来的收益
   • 体积和性能的提升

你将获得：

1. 了解基于 Vue 3 重构组件库的实践经验
2. 了解 Vue 3 为组件开发带来的变化和收益

在 Vue3 中，存在很多仅用于类型系统的辅助函数。这些函数并不具有特殊功能，但很多开发者的错误地把这些函数作为功能函数使用，导致了错误的用法。本次分享将以 Vue 3 的静态类型系统实现为切入点，并结合 TypeScript 相关的知识点，帮助初学者由浅入深学习 TypeScript。

演讲提纲：

1. 前言
   • 介绍 Vue 3 的静态类型系统
2. TypeScript 的优缺点
3. 类型实现
   • defineComponent 类型实现
     • data
     • computed
     • props
   • JSX 类型的实现
4. 总结

你将获得：

理解 Vue 3 类型系统的设计思路，能够帮助开发者更好地写出类型完善的组件，同时也能避免开发者误用 Vue 3 所提供的类型函数。

现在面试经常喜欢问源码，导致很多大兄弟很苦恼，哪怕有部分同学啃完了源码，由于过于纠结于实现细节，把读源码变成了八股文，这个分享就是想探究 Vue3 生态中一些源码的设计思路，结合实际工作，让 Vue3 源码这个宝库能够真正帮助到开发者进阶。

演讲提纲：

1. 前端进阶知识体系介绍
   • Javascript 语言进阶
   • 前端工程化
   • 算法和数据结构
   • 编译原理
2. 怎么通过 Vue 全家桶源码巩固前端知识体系
   • Vue 响应式
   • Vue 编译器
   • Vue 运行时实现剖析
   • 组件库思路剖析
   • 前端路由库
3. 源码能给我们带来什么
   • 不要把源码变成八股文
4. Vue3 生态原理探究

你将获得：

1. 对源码有一个整体了解
2. 通过源码构建自己的知识体系
3. 了解 Vue3 的设计思想
4. 组件库设计的思路

本次演讲主要的关注点是 Vue 3 新特性在组件库开发中的应用，涉及的新特性主要包含 Composition API、Fragment、Teleport、Emits Component Option、v-model arguments、createApp、静态编译优化、更好的 TypeScript 支持、inheritAttrs Component Option、单独使用的 h 函数。对于 Composition API，本次演讲并不过多涉及其对业务层面代码的影响，而是专注于其在库开发层面的影响；对于 Fragment 和 Teleport，本次演讲将介绍其对于特定类型组件开发带来的改变。对于剩余的其他新特性，本次演讲将会给出一些编码建议和最佳实践。

演讲提纲：

上

1. Composition API
   • 逻辑复用
   • 性能优化
   • 类型支持
2. Fragment 的使用
3. Teleport 的使用

下

1. Emits Component Option 相关建议
2. v-model 相关建议
3. 静态优化相关建议
4. inheritAttrs 相关建议
5. TypeScript 相关建议
6. createApp 相关建议
7. 渲染函数 h 相关建议
8. 尚未解决的痛点

你将获得：

1. 了解 Vue 3 新特性
2. 了解新特性对于组件开发性能、可维护性、类型支持等方面的影响
3. 了解在 Vue 3 组件开发中的一些最佳实践和应该避开的问题