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，不受根节点限制，渲染函数可以接受array
- 新增Teleport，类似portal，随用随取，e.g. dialog、action
- 新增Suspense，嵌套的异步依赖，async setup
- 性能提升 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.vite
vite是一个http服务器，特殊的地方：
- 可以在单文件中写es6的语法
- 支持热更新，请求的内容才会被打包更新
- rollup打包，按需编译
快速启动（冷启动，vite的文件放在内存里，加载更快（需要webpack去打包文件，然后去浏览器侧请求）。
vite尝试步骤：
- 在命令行： nrm use npm
- 在命令行：npm install -g vite
- 在命令行：mkdir vite-demo
- 在命令行：cd vite-demo
- 在命令行： npm init -y
- 新建 APP.vue main.js
- 执行：vite 执行