【第1522期】Vue 2.6 发布了

前言

关注前端早读课的童鞋们，新年好。刚从教堂回来看到这个消息，有关注的童鞋了解看看。今日早读文章由@尤雨溪授权分享。

昨天刚刚庆祝了 Vue 发布五周年，今天我们趁热打铁在年三十发布了 Vue 2.6 “Macross”，祝大家新春快乐！

在过去一年里面我们花了大量的精力在新版的 CLI 和 3.0 的设计/原型调研上，因此 Vue 2.x 相对地已经很久没有重大更新了。差不多是时候了！这次的 2.6 包含了一些相当有份量的更新，我们在这里会讨论一些亮点——具体细节还请移步完整的 release note。

Slots：新语法，性能优化，准备接轨 3.0

Slot /插槽 是 Vue 组件的一个重要机制，因为它使得完全解耦的组件之间可以灵活地被组合。在 3.0 的原型开发过程中，我们发现了一些可以进一步改善现有的 slot 机制的方法。这里面有些可能会需要少量破坏性的改动，但也有一些可以以完全向后兼容的方式被引入 2.x。对于那些需要破坏性改动的改进，我们也尽量通过在 2.x 中引入完全兼容的改动来渐进地跟 3.0 的 API 接轨。

新语法

首先，我们为 slot 引入了一套全新的模版语法。语法改动是我们很少做的事情（这也是 3.0 唯一计划改的语法），所以我们尝试了多种不同的设计，并且进行了大量的讨论。最终我们敲定了基于新的 v-slot 指令的语法（具体设计细节见 RFC）。这里是两个简略的例子：

默认作用域插槽 (default scoped slot)

<my-component v-slot="{ msg }">
 {{ msg }}</my-component>

具名插槽 (named slots)

<my-component>
 <template v-slot:header>
   <p>Header</p>
 </template>
 <template v-slot:item="{ data }">
   <h2>{{ data.title }}</h2>
   <p>{{ data.text }}</p>
 </template>
 <template v-slot:footer>
   <p>Footer</p>
 </template>
</my-component>

新语法将普通的插槽 (slot) 和作用域插槽 (scoped slot) 统一在一个指令语法下，并在整体上强调明确性 (explicitness) 和一致性 (consistency)。同时，由于新语法和旧语法完全兼容，这使得我们可以在 2.6 中发布它。

如果你已经熟悉现有的 slot 语法并且英语过关，我们建议你完整地阅读 RFC 来更好地理解新语法为什么这样设计。如果你对于 slot 并不熟悉，那么建议你直接看更新过的文档（或是等勾股更新中文翻译）。

性能优化

在 3.0 中我们希望实现的另一个关于 slot 的改进就是统一 slot 和 scoped slot 的内部实现，从而获得更好的性能优化。普通的 slot 是在父组件的渲染函数中被生成的，因此当一个普通的 slot 所依赖的数据发生变化时，首先触发的是父组件的更新，然后新的 slot 内容被传到子组件，触发子组件更新。相比之下，scoped slot 在编译时生成的是一个函数，这个函数被传入子组件之后会在子组件的渲染函数中被调用。这意味着 scoped slot 的依赖会被子组件收集，那么当依赖变动时就只会直接触发子组件更新了。2.6 中我们又引入了另一个优化：如果子组件只使用了 scoped slot，那么父组件自身依赖变动时，不会再强制子组件更新。这个优化使得父子组件之间的依赖即使在存在 slot 的情况下依然完全解耦，从而保证最优的整体更新效率。（对比之下 React 使用 render props 时绝大部分情况下都会触发父子组件一起更新）

除此之外：

• 所有使用新的 v-slot 语法的 slot 都会被编译为 scoped slot。这意味着所有使用新语法的 slot 代码都会获得上述的性能优化；

• 所有的非 scoped slot 现在也被以函数的形式暴露在 this.$scopedSlots 上。如果你是直接用 render 函数的用户，你现在可以完全抛弃 this.$slots 而全部用 this.$scopedSlots 来处理所有的 slots 了。（3.0 中 this.$slots 将会直接暴露函数，取代 this.$scopedSlots)

• 3.0 中将不再有普通 slot 和 scoped slot 的区分——所有的 slot 都使用统一的语法，使用统一的内部实现，获得同样的性能优化。

异步错误处理

Vue 的内置错误处理机制（组件中的 errorCaptured 钩子和全局的 errorHandler 配置项）现在也会处理 v-on 侦听函数中抛出的错误了。另外，如果你组件的生命周期钩子或是实践侦听函数中有异步操作，那么可以通过返回一个 Promise 的方式来让 Vue 处理可能存在的异步错误。如果你用了 async/await，那么就更简单了，因为 async 函数默认返回 Promise：

export default {
 async mounted() {
   // 这里抛出的异步错误会被 errorCaptured 或是
   // Vue.config.errorHandler 钩子捕获到
   this.posts = await api.getPosts()
 }
}

动态指令参数

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

<div v-bind:[attr]="value"></div>
<div :[attr]="value"></div>
<button v-on:[event]="handler"></button>
<button @[event]="handler"></button>
<my-component>
 <template v-slot:[slotName]>
   Dynamic slot name  </template>
</my-component>

更多细节参见 RFC。该语法一个方便的特性是如果表达式的值是 null 则绑定/侦听器会被移除。

组件库的作者需要注意：该语法需要 2.6 以上版本的 runtime 的配合。如果你发布的是预编译过的组件，并且想要保持跟 2.6 之前版本的兼容，不要使用此功能。

编译警告位置信息

2.6 开始，所有的编译器警告都包含了源码位置信息。这使得我们可以生成更有用的警告信息：

显式创建响应式对象

2.6 引入了一个新的全局 API，可以用来显式地创建响应式对象：

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

生成的对象可以直接用在计算属性 (computed property) 和 render 函数中，并会在被改动时触发相应的更新。

SSR 数据预抓取

新的 serverPrefetch 钩子 使得任意组件都可以在服务端渲染时请求异步的数据（不再限制于路由组件）。这使得整体的数据预抓取方案可以更为灵活，并且可以和路由解耦。Nuxt 和 vue-apollo 等项目已经计划使用此特性来简化其内部实现以及提供新的能力。

可直接在浏览器中引入的 ES Modules 构建文件

Vue 之前版本的 ES Modules 构建文件是针对打包工具的，因此里面包含了一些需要在构建时替换掉的环境变量，从而导致无法直接在浏览器中使用。2.6 包含了一个可以直接在浏览器导入的版本：

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
new Vue({
 // ...
})
</script>

重要的内部改动

nextTick 重新调整为全部使用 Microtask

在 2.5 当中我们引入了一个改动，使得当一个 v-on DOM 事件侦听器触发更新时，会使用 Macrotask 而不是 Microtask 来进行异步缓冲。这原本是为了修正一类浏览器的特殊边际情况导致的 bug 才引入的，但这个改动本身却导致了更多其它的问题。在 2.6 里面我们对于原本的边际情况找到了更简单的 fix，因此这个 Macrotask 的改动也就没有必要了。现在 nextTick 将会统一全部使用 Microtask。如果你对具体的细节感兴趣，可以看这里。

this.$scopedSlots 函数统一返回数组

（此改动只影响使用 render 函数的用户）在 render 函数中，传入的 scoped slot 以函数的形式被暴露在 this.$scopedSlots 上面。在之前的版本中，这些函数会基于父组件传入的内容不同而返回单个 VNode 或是一个 VNode 的数组。这是当初实现时的一个疏漏，导致了 scoped slot 函数的返回值类型是不确定的。2.6 当中，所有的 scoped slot 函数都只会返回 VNode 数组或是 undefined。如果你的现有代码中使用了 this.$scopedSlots 并且没有处理可能返回数组的情况，那么可能会需要进行相应的修正。更多细节参见这里。

致谢
感谢所有为这个版本贡献了 PR 的 contributors，以及参与 RFC 讨论的社区成员。

关于本文
作者：@尤雨溪
原文：https://zhuanlan.zhihu.com/p/56260917