1.vue3简介
1.1 课程简介
Compiler原理介绍，了解Vue3带来的性能提升，开发架构上的变化和打包编译原理。在课程实战环节中，介绍了最新的API用法、遗弃的API和升级指南。Vite作为Vue3开发环境，可以实现动态加载，冷启动 + 编译，方便开发的同时，使用rollup大幅降低了配置流程，结合Vue3的composition API，更加方便了开发。介绍了这么多，快来试试吧！
1.2 vue3的优势：
1.3 vue3.0带来的变化：
- 按需加载，VDom/reactive 算法，e.g. v-model/Transition
- 组合API
- TS 支持，新增 Fragment、Teleport、Suspense
- 性能提升 1.3~2.X
1.4 vue-next-template-explorer 尝鲜：
示例：
可以看到模板中有四个div，也就是四个根节点，在vue2中，一个模板里面只能有一个根节点。编译器使用 createVNode 创建了虚拟节点，并启用 hoistStatic 能力将静态节点和动态节点区分，对静态内容，不再做更新处理。
上面这个示例，不启用 cacheHandlers 之前是将事件绑定在当前上下文，启用了 cacheHandlers 的能力，会将事件进行全局注册。在定义组件的场景下，启用 cacheHandlers 就不会对重复创建的组件上的事件多次实例化。
ssr 模式下，抽离了静态节点，转化为string字符串。
根据上面几个实例，可以看到 compiler 优化的几点：
- 静态节点不在做更新处理（hoistStatic -> SSR）
- 静态绑定的class id等属性不做更新处理
- 结合打包hint，进行更新分析（动态绑定）
- 事件监听器 Cache 缓存处理（cacheHandlers）
- hoistStatic自动针对多静态节点进行优化，输出字符串
- 按需加载，当模板为空时，输出为null
总结起来就是：
- virtual dom机制调整
- 内存优化
- 按需加载，更灵活的组件化
2.vue3的使用
setup 的 this 是个 void。