vue2.6新版本发布啦

翻译来源：https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e
翻译时间：2019年2月5日09:48:43

就在2月5日，大年初一第一天，vue.js发布了最新版本2.6 release版本，

版本代号为： Marcross

马库斯要塞.jpeg

翻译如下：
昨天我么刚刚庆祝vue第五届大会，今天我们很高兴宣布退出了vue2.6版本 “Macross”!

在过去的一年中，我们花费了很多时间研究新的vue-cli以及3.0的原型设计，也正因此很久都没有发布vue2.x版本的迭代，现在是时候发布了！本文结合了本版本中重要的更新，一些实质性的改进和新功能，如果你想要了解详细的信息，请务必在github官网查看完整发型版说明。

slot 新的语法更好的学性能提升以及渐进式的接入vue3.0版本的语法

插槽一直都是一个重要的机制，可以在vue中实现很灵活的组件组合方式。在3.0的原型设计中，我们发现了很多改进的方面。其中有一些改进是可以不需要破坏式的更改就可以引入，这也允许我们在vue2.x版本引入。但是对于那些需要重大改变的变化，我们也在考虑努力提供渐进式的替代方案，来让迁移变得更加容易。

1. 新语法

第一个是插槽作用域的新语法，我们讨论，设计了多个不同的实现，最终实现了 v-slot

 <my-component>
        <template v-slot:header>
                <p>标题</p>
        </template>

        <template v-slot:item="{data}">
                <p>{{data.title}}</p>
                <p>{{data.text}}</p>
        </template>

        <template v-slot:footer>
                <p>页脚</p>
        </template>
</my-component>

新语法同意了单个指令中普通插槽与作用域插槽的使用，并且强制使用更加明确和可读的命名槽，现在的语法与vue2完全兼容，所以我们决定在vue2.6中发布。

如果你已经熟悉了现有的插槽语法，那么我们建议你阅读RFC来理解新语法背后的基本原理，如果你还不熟悉插槽，那么我们建议你查看更新版本的插槽语法文档

2. 更好地性能提升

插槽的另外一方面语法改进是我们希望在3.0中改进的。实现了统一的普通插槽和范围插槽，这是因为作用域插槽的性能优势。在父级的渲染周期中渲染正常插槽，当插槽的依赖关系发生更改时，它会导致父组件和子组件重新渲染。另一方面，作用于插槽被便以为内联函数，在子组件渲染周期中被调用，这也意味着子组件具备了插槽所依赖的任何数据依赖，从而产生更精准的更新。2.6中，我们引入了一种优化策略，保证了父组件范围依赖仅仅只会影响父组件，而且如果只是使用的是范围插槽，不会强制更新子组件更新。
另外，

使用了新的v-slot语法中所有插槽都会编译为范围插槽，这意味着使用新语法的所有插槽都会自动获得性能提升；
所有普通插槽现在也this.$scipedSlots作为功能公开，这也意味着现在可以始终使用渲染函数，而不用模板语法的用户，而this.$scopedSlots无需担心传入的插槽类型。
在 vue 3.0 中，将不再区分范围和非范围的插槽，所有的插槽将会使用统一语法，编译为相同的格式，并且还会有最好的性能。

异步错误处理

vue中内置错误处理机制：

组件内errorCaptured挂钩
全局errorHandler挂钩
现在也会捕捉v-on处理程序内部的错误，此外，如果您的任何生命周期钩子或者事件处理程序制定了异步操作，那么你现在可以从该函数返回一个Promise，以方便来自于该Promise调用中任何未被捕获的错误也会发送给您的错误处理程序。当然如果你使用的是 async/await ，就会变得更加容易，因为异步函数隐式的返回Promise

export default {
  async mounted() {
    // if an async error is thrown here, it now will get
    // caught by errorCaptured and 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]>
        动态插槽名称
    </template>
</my-component>

注意，如果参数值是null，现在会直接删除绑定/真挺器

编译器警告消息中的代码框架

在2.6之后，大多数模板编译警告都会携带出错源头信息，这也让我们能够为这些警告生成漂亮的代码错误提示。

显示的创建独立的可观察对象

vue2.6 提供了新的全局API，来显示的创建一个独立的观察对象。

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

这个返回的结果对象可以被直接使用在计算属性或者渲染函数中，而且在更新和改变的时候也会被触发。(一句话总结，就是和普通组件中的data属性类似，但是却不会侵入到代码中)

服务端预渲染（ssr) 中的数据提前获取

提供了新的生命周期钩子 serverPrefetch 允许任何组件（包括了路由组件）的任何位置可以在服务端预处理数据，从而允许你更加轻松的使用和减少数据获取与路由器之间的耦合。
例如nuxt已经计划使用 vue-apollo 计划使用这个新功能来简化逻辑。

可以直接import的ES module 模块

vue2.6可以直接使用 import语法

  <script type="module">
        import Vue from 'http://demo.vue.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 并且没有处理可能返回数组的情况，那么可能会需要进行相应的修正。更多细节参见这里。