vue 2.6 更新变动

[原文链接 ]

Slots:新语法，性能改进为3.0做准备
改用 v-slot 指令

// 默认插槽
// 插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确

<baz v-slot ="baz">
{{baz}}
</ baz >

// 嵌套默认插槽
// 组件提供的范围变量也在该组件本身上声明
// 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。
// 内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里。

<foo v-slot="foo">
<bar v-slot="bar">
<baz v-slot="baz">
{{ foo }} {{ bar }} {{ baz }}
</baz>
</bar>
</foo>


// 具名域槽
<my-name>
<template v-slot:one="{ msg }">
{{ msg }}
</template>
</my-name>

// 混用插槽
// v-slot 只能添加在一个 <template> 上

<foo>
<template v-slot:one="one">
<bar v-slot="bar">
<div>{{ one }} {{ bar }}</div>
</bar>
</template>

<template v-slot:two="two">
<bar v-slot="bar">
<div>{{ two }} {{ bar }}</div>
</bar>
</template>
</foo>

// 动态插槽名
// 动态指令参数也可以用在 v-slot
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

// 具名插槽的缩写 
// v-slot:header 可以被重写为 #header
// 该缩写只在其有参数的时候才可用

 

异步错误处理

Vue的内置错误处理机制（errorCaptured钩子和全局errorHandler钩子），现在也捕获v-on处理程序内部的错误。

建议使用async / await 异步函数隐式返回Promises

export default {
async mounted() {
//如果在这里抛出异步错误，由errorCaptured和Vue.config.errorHandler捕获
this.posts = await api.getPosts()
}
}

 动态指令参数
指令参数现在可以接受动态JavaScript表达式
动态参数值应该是字符串，但允许null作为一个明确指示应该删除绑定的特殊值，那将会很方便。任何其他非字符串值都可能出错，并会触发警告。（仅适用于v-bind和v-on）

<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>
//简写
<foo>
<template #[name]>
Default slot
</template>
</foo>


<div :[key + 'foo']="value"></div> //可能不会执行
//使用
<div :[`${key}foo`]="value"></div>

编译警告位置信息

大多数模板编译警告现在都带有源范围信息。

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

const reactiveState = Vue.observable({
count: 0
})
//生成的对象可以直接用在计算属性 (computed property) 和渲染函数(render) 中，并会在被改动时触发相应的更新。

服务器端渲染期间的数据预取(SSR)
serverPrefetch钩子允许（而不是仅仅路线级组件）的任何部件的服务器端渲染期间预取数据，从而允许更灵活的使用和减少数据提取与路由器之间的耦合。
像Nuxt这样的项目vue-apollo已经计划使用这个新功能简化他们的实现。

重要的内部变化
   nextTick
在2.5.0中，我们进行了内部调整，nextTick如果在v-on事件处理程序中触发更新，则会导致使用Macrotasks而不是Microtasks对更新进行排队。
这最初的目的是修复一些浏览器边缘情况，但反过来又导致了许多其他问题。
在2.6中，我们找到了原始问题的一个更简单的解决方案，它允许我们nextTick在所有情况下恢复一致地使用Microtasks。

this.$scopedSlots现在的函数总是返回Arrays

（此改动只影响使用 render 函数的用户）在 render 函数中，传入的 scoped slot 以函数的形式被暴露在 this.$scopedSlots 上面。

   在之前的版本中，这些函数会基于父组件传入的内容不同而返回单个 VNode 或是一个 VNode 的数组。

  这是当初实现时的一个疏漏，导致了 scoped slot 函数的返回值类型是不确定的。
  2.6 当中，所有的 scoped slot 函数都只会返回 VNode 数组或是 undefined。
  如果你的现有代码中使用了 this.$scopedSlots 并且没有处理可能返回数组的情况，那么可能会需要进行相应的修正。