昨天刚刚庆祝了 vue 发布五周年, 今天我们趁热打铁在年三十发布了 Vue 2.6 "Macross", 祝大家新春快乐!
在过去一年里面我们花了大量的精力在新版的 CLI 和 3.0 的设计 / 原型调研上, 因此 Vue 2.x 相对地已经很久没有重大更新了. 差不多是时候了! 这次的 2.6 包含了一些相当有份量的更新, 我们在这里会讨论一些亮点 -- 具体细节还请移步完整的 release note https://github.com/vuejs/vue/releases/tag/v2.6.0 .
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 并不熟悉, 那么建议你直接看更新过的文档 https://vuejs.org/v2/guide/components-slots.html (或是等勾股更新中文翻译).
性能优化
在 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 钩子 https://ssr.vuejs.org/api/#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://juejin.im/entry/5c59186ce51d457fa277e710