Vue 2.6发布：新语法、性能改进、向3.0看齐

最新推荐文章于 2024-08-16 10:09:15 发布

糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖

最新推荐文章于 2024-08-16 10:09:15 发布

阅读量454

点赞数

本文链接：https://blog.csdn.net/cpongo4/article/details/89147821

版权

近日，尤雨溪在 medium 上宣布推出 Vue 2.6——代号“Macross”。尤雨溪表示，在过去的一年中，他们在开发新 CLI 和 3.0 原型设计上花了很多时间。因此，Vue core 2.x 在很长一段时间内都没有推出重大更新。现在是时候了，2.6 版本带来了一些实质性的改进、内部变更和新功能，本文将会重点介绍。

如果需要了解完整的详细信息，请务必查看GitHub上的发行说明。

slot：新语法、性能改进、向3.0看齐

slot是在Vue中灵活组合组件的一种重要机制。在3.0版本原型设计过程中，我们发现了很多可以改进它的方法。其中一些不会带来重大变更，可以在2.x的次要版本中发布。对于那些需要做出重大变更的，我们也在努力尝试在2.x版本中提供渐进式的替代方案，让将来的迁移变得更容易些。

新语法

首先是scoped slot的新语法。我们提出、讨论并试验了多种不同的设计：

最终确定了这个RFC所描述的v-slot语法。

以下是使用命名slot的一个简短示例：

\u0026lt;my-component\u0026gt;  \u0026lt;template v-slot:header\u0026gt;    \u0026lt;p\u0026gt;Header\u0026lt;/p\u0026gt;  \u0026lt;/template\u0026gt;    \u0026lt;template v-slot:item=\u0026quot;{ data }\u0026quot;\u0026gt;    \u0026lt;h2\u0026gt;{{ data.title }}\u0026lt;/h2\u0026gt;    \u0026lt;p\u0026gt;{{ data.text }}\u0026lt;/p\u0026gt;  \u0026lt;/template\u0026gt;    \u0026lt;template v-slot:footer\u0026gt;    \u0026lt;p\u0026gt;Footer\u0026lt;/p\u0026gt;  \u0026lt;/template\u0026gt;\u0026lt;/my-component\u0026gt;

使用了多个命名slot的组件的v-slot用法。

新语法通过单个指令使用普通的slot和scoped slot，并强制要求使用更明确和具有更高可读性的命名slot。它与现有语法完全兼容，马上就可以在2.6中发布。

如果你已熟悉现有的slot语法，我们建议你阅读一下这个RFC，以更好地理解新语法背后的基本原理。

如果你对slot还不熟悉，建议先查看一下更新的slot文档。

性能改进

我们将在3.0版本中看到有关slot的另一个改进，即普通slot和scoped slot的实现将得到统一，主要是因为scoped slot在性能方面的优势。普通slot将在父组件的渲染周期中渲染。当slot的依赖项发生变化时，会导致父组件和子组件进行重新渲染。另一方面，scoped slot被编译成内联函数，并在子组件的渲染周期中被调用。

这意味着子组件将会收集scoped slot所依赖的所有数据依赖项，从而做出更精确的更新。在2.6版本中，我们引入了一种优化手段，进一步确保父组件的依赖项变化仅影响到父组件，并且如果只使用了scoped slot，就不会强制子组件做出更新。

此外：

所有使用新v-slot语法的slot都将被编译为scoped slot，这意味着所有使用新语法的slot都会自动获得性能提升；
现在所有普通的slot也通过this.$scopedSlots暴露出来，这意味着使用render函数而不是模板的用户现在也可以使用this.$scopedSlots，而不用担心传入的slot是什么类型。

在3.0中，将不再区分scoped与非scoped slot——所有slot将使用统一的语法，被编译为相同的格式，并具有相同的性能。

异步错误处理

Vue的内置错误处理机制（组件内errorCaptured hook和全局errorHandler hook）现在也会捕获v-on处理程序内部的错误。此外，如果任意一个生命周期hook或事件处理程序执行了异步操作，现在可以从函数中返回一个Promise，Promise链中任何一个未被捕获的错误都会被发送给错误处理程序。如果使用了async/await，则会变得更加容易，因为异步函数隐式返回Promise：

export default {  async mounted() {    // if an async error is thrown here, it now will get    // caught by errorCaptured and Vue.config.errorHandler    this.posts = await api.getPosts()  }}

动态指令参数

指令参数现在可以接受动态JavaScript表达式：

\u0026lt;div v-bind:[attr]=\u0026quot;value\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;div :[attr]=\u0026quot;value\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;button v-on:[event]=\u0026quot;handler\u0026quot;\u0026gt;\u0026lt;/button\u0026gt;\u0026lt;button @[event]=\u0026quot;handler\u0026quot;\u0026gt;\u0026lt;/button\u0026gt;\u0026lt;my-component\u0026gt;  \u0026lt;template v-slot:[slotName]\u0026gt;    Dynamic slot name  \u0026lt;/template\u0026gt;\u0026lt;/my-component\u0026gt;

更多细节可以在这个RFC中找到。

为了方便起见，如果参数值为null，则绑定和监听器会被移除。库的作者要注意：这个功能要求Vue运行时为2.6.0及以上版本。如果你提供预编译的组件，并希望保持与2.6之前版本的兼容性，请避免在源代码中使用它。

编译器警告消息中的代码帧

这要感谢GitHub用户@gzzhanghao提出的拉取请求。

从2.6版本开始，大多数模板编译警告消息现在都带有源码区间信息。这样我们就能够为这些警告消息生成更好的代码帧：

$\"\"$

显式创建单独的反应式对象

2.6版本引入了一个新的全局API来显式创建单独的反应式对象：

const reactiveState = Vue.observable({  count: 0})

生成的对象可以直接用在计算属性或render函数中，并在发生变化时触发适当的更新。

服务器端渲染期间的数据预取

新的serverPrefetch hook允许任何组件（不仅仅是路由级别的组件）在服务器端渲染期间预取数据，使使用更加灵活，并降低数据获取和路由器之间的耦合。一些项目（如Nuxt和vue-apollo）已经计划通过这个新功能来简化它们的实现。

新ES模块构建，可直接导入使用

之前，我们的ES模块构建主要目标是与捆绑包一起使用。这些构建包含了在编译时需要替换为环境变量的内容。Vue 2.6现在提供了新的ES模块构建，目标是直接在浏览器中使用：

\u0026lt;script type=\u0026quot;module\u0026quot;\u0026gt;import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'  new Vue({  // ...})\u0026lt;/script\u0026gt;

重要的内部变更

让nextTick恢复使用Microtask

在2.5.0版本中，我们做出了一个内部调整，如果更新是在v-on事件处理程序中触发的，则会导致nextTick使用Macrotask（而不是Microtask）来让更新进入队列。最初这么做是为了修复一些浏览器的边界情况，但反过来又导致了很多其他问题。在2.6版本中，我们为原始问题找到了一个更简单的修复方案，这样我们就可以在任何情况下恢复nextTick使用Microtask。

如果你对这方面的技术细节感兴趣，请在此处查看。

通过this.$scopedSlots暴露的函数现在总是返回Arrays

这个变更只影响render函数用户。在render函数中，scoped slot通过this.$scopedSlots暴露为函数。到目前为止，调用scoped slot函数可能返回单个VNode或VNode数组，具体取决于父组件传入的是什么。这种设计实际上是一种疏忽，因为它返回的值类型是不确定的，并且可能会导致意外的边界情况。

在2.6版本中，scoped slot函数确保只返回VNode数组或undefined。已有代码中如果有些地方返回的是数组，但没有被检查出来，可能会出问题。更多细节请看这里。