Vue 3.0 特性及改变方向

有写的不对的地方，欢迎评论指正~啾咪！

Vue 3.0 ？

2019年6月8日，Evan You（尤雨溪）在 VueConf 的主题演讲中透露3.0 的模板性能完爆 JSX 。
利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。
按照尤雨溪的说法，因为 Vue 3.0 是主要版本，所以会包含一些重大变更。

为什么Vue 3.0 是主要版本？

Vue 1.0 到Vue 2.0 的升级：改变了配置文件，修改了API文档。
具体改变，例如：

• 使用v-slot取代slot和 slot-scope；
• 修改获取DOM元素方式；
• 变更v-for遍历数组时的参数顺序 ；
• 等等…

而在Vue 3.0从源码开始，从头开始重新写，并将一些内部功能分解为单独的包，以便隔离复杂性。

Vue 3.0有这几个主要特点：响应式、模板、对象式的组件声明方式，进行了全面的更改，底层的实现和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了更多功能，提供了类式的组件声明方式。而且源码全部用typescript重写。以及进行了一系列的性能优化。

有哪些值得期待的地方？

1. Make it faster（让它更快）
2. Make it smaller（打包后文件更小）
3. Make it more maintainable（更易于维护）
4. Make it easier to target native（更容易定位原生）
5. Make it more modular（更加模块化）
6. 改进编译器
7. 支持 IE 11
8. 其他运行时改进
9. 改进观察机制
10. 加强 TypeScript 支持
11. 加强 API 设计一致性
12. 开放更多底层功能

将会有哪些重大改变？

1. 新的源代码结构（有可能会变化）
2. 重写虚拟DOM (Virtual DOM Rewrite)
   随着虚拟 DOM 重写，我们可以期待更多的 编译时（compile-time）提示来减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点。
   
3. 安装和修补速度提高100％（faster mounting & patching）
4. 更多编译时提示（More compile-time hints）
5. 减少运行时开销（to reduce runtime overhead）
6. 优化的插槽生成（Optimized Slots Generation）
   避免不必要的父/子重新渲染
7. 静态树提升(Static Tree Hoisting)
   使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
   
8. 静态属性提升（Static Props Hoisting）
   跳过修补节点本身，但继续修补子节点
   
9. 内联处理器提升（Inline Handler Hoisting）
   由于不同的内联函数标识，避免不必要的重新渲染
   
10. 基于 Proxy 的观察者机制，全语言覆盖+更好的性能（Proxy-based observation mechanism with full language coverage + better perf）
    目前，Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。
    但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。
    为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。
11. 打包后更小
    这将在很大程度上通过消除不使用的库(也称为Tree Shaking)来实现。 例如，如果您没有使用 过渡（transition）元素，则不会包含它。
12. 使其更具可维护性
    虽然大多数 Vue 开发人员都没有在库本身上工作，但很高兴知道 Vue 3 将带来更多可维护的源代码。 它不仅会使用 TypeScript ，而且许多软件包将被解耦，使所有内容更加模块化。
13. 更多的原生支持
    运行时内核也将与平台无关，使得 Vue 可以更容易地与任何平台（例如Web，iOS或Android）一起使用。
14. 更易于开发使用
    Observer 模块已被解压缩到自己的包中，允许您以新的方式使用它：
    
15. 跟踪重新渲染的位置也会更容易。 Evan 在 2018年的演讲中做了一些实时编码，并展示了如何跟踪 Vue 应用程序（使用下面的代码）来找出触发组件重新渲染的内容。 这在更大的应用程序和性能微调中非常有用。
    Vue 3.0 还会改进对 TypeScript 的支持，允许在编辑器中进行高级的类型检查和有用的错误和警告。
    
16. 实验性的 Hooks API
    当我们需要在 Vue 中共享两个组件之间的行为时，我们通常使用 Mixins 。然而，Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题，并且更适合使用惯用的 Vue 代码。
    
17. 实验性的 Time Slicing 支持
    当您有许多组件同时尝试重新渲染时，任何浏览器都可以开始变得很慢，从而使用户体验下降。
    Evan展示了他如何尝试使用 Time Slicing，将 JS 的执行分解为几个部分，如果有用户交互需要处理，这些部分将提供给浏览器。

如何兼容Vue2.0？

开发组会非常重视兼容性问题，他们也将尽快开始传达这些重大变更，并做了这样的保证：除了渲染函数 API 和作用域插槽语法之外的所有内容都将保持不变，或者通过兼容性构建让其与 2.x 保持兼容。

Vue 3.0 虽然会对顶级 API 进行重大的修整，但依然会保持与 2.x 的兼容。此外，2.x 的最后一个次要版本将成为 LTS，并在 3.0 发布后继续享受 18 个月的 bug 和安全修复更新。

发布日期？

最终发布时间还没确定，可能会在 2019 年。

开发组将完成 3.0 版本的编译器和服务器端渲染部分，并开始发布 Alpha 版本。这些主要用于针对一小部分新应用进行稳定性测试。然后就是 Beta 阶段，在测试阶段，主要目标是更新支持库和工具，如 Vue Router、Vuex、Vue CLI、Vue DevTools，并确保它们与新版本能够完美兼容。开发组还会与社区的库作者合作，帮助他们一起为 3.0 做好准备。

在 API 和代码库稳定之后，将冻结 API 并进入 RC 阶段。在这个阶段，还将提供“兼容版本”：包含 2.x API 兼容层的 3.0 版本。这个版本还将带有一个标记，可以打开这个标记来禁用有关 2.x API 的警告。兼容版本可作为将应用程序升级到 3.0 的指南。

在发布最终版本之前的最后一个任务是提供上述的 IE 11 兼容构建版本。

最后附上参考的文章：
尤雨溪公布 Vue 3.0 开发路线：将从头开始重写 3.0.
Vue.js 3.0 新特性预览.
Vue Toronto 的Vue.js 3.0 主题演讲的PPT（需要科学上网工具）.
Vue Conf 上海 2019 的Vue.js 3.0 主题演讲的PPT（需要科学上网工具）.
RFC地址.