Vue.js 3.0 新特性有哪些？来看一看

2018-11-1913:01:09WEB前端开发Comments2,750 views字数 1622阅读模式

利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

让 Vue 更快

虽然 Vue 已经非常快了，但 Evan 认为 Vue 3 会更快。如何做到呢…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

重写虚拟DOM (Virtual DOM Rewrite)

随着虚拟 DOM 重写，我们可以期待更多的编译时（compile-time）提示来减少运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

优化插槽生成(Optimized Slots Generation)

在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染。使用 Vue 3 ，可以单独重新渲染父组件和子组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

静态树提升(Static Tree Hoisting)

使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

静态属性提升（Static Props Hoisting）

此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

基于 Proxy 的观察者机制

目前，Vue 的反应系统是使用 ObectDefineProperty 的 getter 和 setter。但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

使 Vue 更小

Vue已经非常小了，在运行时（runtime）压缩后大约 20kb 。但我们可以期待它会变得更加小，新的核心运行时压缩后大概 10kb 。这将在很大程度上通过消除不使用的库(也称为Tree Shaking)来实现。例如，如果您没有使用过渡（transition）元素，则不会包含它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

下面您可以看到 hello world 应用程序与压缩后的大小的比较。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

使其更具可维护性

虽然大多数 Vue 开发人员都没有在库本身上工作，但很高兴知道 Vue 3 将带来更多可维护的源代码。它不仅会使用 TypeScript ，而且许多软件包将被解耦，使所有内容更加模块化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

更易于开发使用

Observer 模块已被解压缩到自己的包中，允许您以新的方式使用它：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

跟踪重新渲染的位置也会更容易。在 Evan 的演讲中，他做了一些实时编码，并展示了如何跟踪 Vue 应用程序（使用下面的代码）来找出触发组件重新渲染的内容。这在更大的应用程序和性能微调中非常有用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

Vue 3.0 还会改进对 TypeScript 的支持，允许在编辑器中进行高级的类型检查和有用的错误和警告。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html

实验性的 Hooks API

当我们需要在 Vue 中共享两个组件之间的行为时，我们通常使用 Mixins 。然而，Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题，并且更适合使用惯用的 Vue 代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7889.html