Vue 2.6 版本“Macross”发布

Vue 团队昨天宣布发布了 Vue 2.6 版本，其中包含 Vue 插槽的新语法。有关 Vue 2.6 的完整详细信息，请查看 Vue 创建者 Evan You 的发布公告文章。

Vue 2.6 "Macross" 已发布！ https://t.co/NMR4TXxAEk

— Vue.js (@vuejs) 2019 年 2 月 4 日

相关内容：Vue.js 教程：从 jQuery 到 Vue.js

#新插槽语法

首先，Vue 2.6 最重要的变化是新的插槽语法，它将 Vue 2.6 的插槽语法与 Vue 3.0 对齐。新语法统一了我们在 Vue 2.5 及更早版本中使用的 slot 和 slot-scope 属性。

以下所有示例都来自 关于新插槽语法的 RFC。

以下是一个使用新旧样式的默认插槽示例

<!-- old -->
<foo>
  <template slot-scope="{ msg }">
    {{ msg }}
  </template>
</foo>
 
<!-- new -->
<foo v-slot="{ msg }">
  {{ msg }}
</foo>

命名插槽现在看起来像这样

<!-- old -->
<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: {{ msg }}
  </template>
 
  <div slot="two" slot-scope="{ msg }">
    element slot: {{ msg }}
  </div>
</foo>
 
<!-- new -->
<foo>
  <template v-slot:one="{ msg }">
    text slot: {{ msg }}
  </template>
 
  <template v-slot:two="{ msg }">
    <div>
      element slot: {{ two }}
    </div>
  </template>
</foo>

#错误处理

Vue 2.6 现在捕获 v-on 处理程序中的错误，您可以在需要执行异步操作的生命周期钩子或事件处理程序中返回一个 Promise。任何未捕获的错误都会被发送到 Vue 的错误处理程序。使用 async/await 使这变得非常方便 - 以下是从 Vue 的官方发布公告中的一个示例

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()
  }
}

#Vue.observable

另一个引起我注意的功能是使用 Vue.observable() 创建响应式对象的能力

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

可观察对象可以直接在计算属性和渲染函数中使用。

#编译错误的源范围

从 Vue 2.6 开始，模板编译警告具有源范围信息。因此，模板警告具有代码框架，使其更容易在模板中发现警告

要进一步了解 Vue 2.6 版本中包含的所有内容，您应该查看官方的 Vue 发布公告文章 和 发布说明。