Vue 2.6 发布了

Vue 2.6 发布了

英文原文:medium.com/the-vue-poin

昨天刚刚庆祝了 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 讨论的社区成员。

发布于 2019-02-05