# Vite 入门

# Compiler 原理篇

# 1.Vue3.0 带来的变化

• 性能提升 1.3~2x
• Ts 支持，新增: Fragment, Teleport, Suspense
• 按需加载 (配合 vite) & 组合 API

# 2. 优化案例 1:

• 静态 Node 不再作更新处理 (hostStatic -> SSR 优化)
• 静态绑定的 class, id 不再作更新处理
• 结合打包标记 PatchFlag, 进行更新分析 (动态绑定)

# 3. 优化案例 2:

• 事件监听器 Cache 缓存处理 (cacheHandlers)
• hoistStatic 自动针对多静态节点进行优化，输出字符串
• vue3.0 在线编译结果

# 4. 新增功能

• Fragment -- 不受根节点限制，渲染函数可接收 Array
• Teleport -- 类似 Portal, 随用随取，e.g. 弹窗，Actions
• Suspense -- 嵌套的异步依赖，e.g.async setup ()

# 5.Composition API

• TS 支持
• 复杂组件逻辑进行分离
• 组件间逻辑共享

# vite 概念篇

# 1.Vite (法语：快捷) 是一个 HTTP 服务器

• 可以在单文件中书写 es6 语法
• 支持热更新 (请求的内容才会被打包 / 更新)
• Rollup 打包

# 2.Vue2x vs Vue3x

• 90% 以上的代码可与 vue2.0 复用
• Composition API 作为新增 API 不会影响旧的逻辑代码
• Mixin 不在推荐，filters 已经被遗弃

# 3. TS 学习网站

• TS 中文网

• TS 学习指南

• TypeScript 入门教程