各位小伙伴们，尤大大在4.17号发布了 Vue 3.0 beta ，看了4.21号尤大大的直播 视频 之后，感觉其中真的是有很多精华内容，一起和大家分享学习下。有不足之处，还望大家指出。
首先 Vue 3 里很多大的改动都是通过 RFC 机制来讨论来的，有兴趣可以看下 RFC 文档。
体验 Vue 3 的 3 种姿势
1. 通过 Vue cli
# 使用 vue cli 创建 vue 项目（此时为2.x版本）
vue create vue-demo-cli
# 在项目下安装 vue-next，升级为 vue 3.0 beta 版本，可在 package.json 文件中查看vue版本
cd vue-demo-cli
vue add vue-next
# 启动项目
yarn sevre
2. 通过 webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd vue-next-webpack-preview
yarn
yarn dev
3. 通过 vite
npm install -g create-vite-app
create-vite-app vue-demo-vite
# 安装依赖，并启动项目
cd vue-demo-vite
yarn
yarn dev
Vue 3 有哪些亮点
1、Performance ：性能
- 重写了 virtual dom 的实现（第一是为了保证兼容性，另一方面 vdom 提供了在模版之外的更灵活的逻辑表达能力）
- 编译模版的优化
- 更高效的组件初始化
- update 性能提高1.3~2倍
- SSR 速度提高了2~3倍
Vue 3 模版编译示例 一
在 Vue 3 中，只有带 patchflag 标记的节点会被追踪，通过 patchflag 信息，只比较 patchflag 对应的属性。而且无论子节点嵌套多少，也不需要遍历，会直接绑定在根结点上。这里要注意到 patchflag 是采用了一种位运算。关于 patchFlag，感兴趣的可以看源码。
Vue 3 模版编译示例 二
-
配置 hoiststatic 静态节点提升
在应用启动的时候被创建一次，这些虚拟节点在每次渲染的时候不停复用。
-
配置 cacheHandles 事件侦听器缓存
第一次渲染的时候，创建内联函数，并缓存；后续更新的时候，直接从缓存中读同一个函数。（手写的内联函数也支持）
当连续的静态节点的个数超过预值（应该是10）的时候，就会启用 createStaticVNode ，将静态节点使用 innerHtml ，而不是创建一个个 vdom 对象，再 append 进去。
以上通过设置 patchflag，以及配置静态节点提升、事件缓存，既保证了模版的灵活性，同时跳出了 vdom 的渲染瓶颈。感兴趣的小伙伴可以在 Vue 3 模版编译 与 Vue 2 模版编译 对比查看。
2、Tree-shaking support
有时候我们不需要 vue 提供的所有功能，如 transition ，但在 vue 2 中并没有对其做处理。在 vue 3 除了 vdom 更新算法和响应式系统会包含在包里，其他 API 都可以按需引入。
3、Composition API ：组合 API
4、Fragment，Teleport，Suspense
5、Better TypeScript support ：更好的 ts 支持
6、Custom Renderer API ：自定义渲染 API
剩余工作
图片预警...
Vue 2.x
个人总结
Vue 3 这次的改变，不仅仅让我感受到了开发过程中更多的自由，同时又带来了很多优化。接下来的这段时间里，我会尝试去阅读并理解 Vue 3 的源码。最后，Vue 3 带来了很多新的特性，但是目前并不适合将现有的项目迁移。
