没错,Vue 又更新啦!快来看看又新增了哪些有意思的 API!

发布时间:2019-02-08 19:23:33

VueJs

昨日刚刚庆祝了 Vue 发布五周年,今日咱们抓住时机在年三十发布了 Vue 2.6 "Macross",祝咱们新春快乐!

在曩昔一年里边咱们花了很多的精力在新版的 CLI 和 3.0 的规划/原型调研上,因而 Vue 2.x 相对地现已好久没有严重更新了。差不多是时分了!这次的 2.6 包含了一些适当有份量的更新,咱们在这儿会评论一些亮点——详细细节还请移步完好的 release note。

VueJs

Slots:新语法,功用优化,预备接轨 3.0

Slot /插槽 是 Vue 组件的一个重要机制,由于它使得彻底解耦的组件之间能够灵敏地被组合。在 3.0 的原型开发过程中,咱们发现了一些能够进一步改善现有的 slot 机制的办法。这儿边有些或许会需求少数破坏性的改动,但也有一些能够以彻底向后兼容的方法被引进 2.x。关于那些需求破坏性改动的改善,咱们也尽量经过在 2.x 中引进彻底兼容的改动来渐进地跟 3.0 的 API 接轨。

新语法

首要,咱们为 slot 引进了一套全新的模版语法。语法改动是咱们很少做的工作(这也是 3.0 仅有方案改的语法),所以咱们尝试了多种不同的规划,而且进行了很多的评论。终究咱们敲定了根据新的 v-slot 指令的语法(详细规划细节见 RFC)。这儿是两个简略的比如:

默许效果域插槽 (default scoped slot)

签字插槽 (named slots)

新语法将一般的插槽 (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:

动态指令参数

指令的参数现在能够承受动态的 JavaScript 表达式:

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

组件库的作者需求留意:该语法需求 2.6 以上版别的 runtime 的合作。假如你发布的是预编译过的组件,而且想要坚持跟 2.6 之前版别的兼容,不要运用此功用。

编译正告方位信息

2.6 开端,一切的编译器正告都包含了源码方位信息。这使得咱们能够生成更有用的正告信息:

显式创立呼应式目标

2.6 引进了一个新的大局 API,能够用来显式地创立呼应式目标:

生成的目标能够直接用在核算特点 (computed property) 和 render 函数中,并会在被改动时触发相应的更新。

SSR 数据预抓取

新的 serverPrefetch 钩子 使得恣意组件都能够在服务端烘托时恳求异步的数据(不再约束于路由组件)。这使得全体的数据预抓取方案能够更为灵敏,而且能够和路由解耦。Nuxt 和 vue-apollo 等项目现已方案运用此特性来简化其内部完成以及供给新的才能。

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

Vue 之前版别的 ES Modules 构建文件是针对打包东西的,因而里边包含了一些需求在构建时替换掉的环境变量,然后导致无法直接在浏览器中运用。2.6 包含了一个能够直接在浏览器导入的版别:

重要的内部改动

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 评论的社区成员。

尤雨溪