Vue 2.6来了 vue 2.0 3.0

本文摘自知乎——《Vue 2.6 发布了》，大家可以通过文章底部的阅读原来来访问原文地址

抖音logo

Vue 2.6发布了

Vue官方在大年三十发布了Vue 2.6——Macross，Vue 2.x已经好久没有重大更新了，不过这次特意跳转大年三十发布重大版本，可见一定有大招放出。接下来让我们细数究竟有哪些大招。

slot的增强

Vue 2.6引入了全新的语法，并对slot中嵌套的父子组件渲染性能进行了优化。

由于仍然在2.x版本中，所以大家不必担心语法兼容问题，全新语法是向下兼容的。

默认作用域插槽 (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>

以上代码中可以看出，Vue 2.6更加强调语法的一致性和明确性，将普通插槽（slot）和具名插槽（scoped-slot）统一在了一个指令语法下。除此之外，全新的语法还有更多的优势，关注本公众号，会在下期文章中为大家解释。

性能方面的考虑在Vue Conf大会上，尤雨溪已经为大家做了解释，可以查看往期文章来回顾一下——《尤雨溪分享Vue3最新进展》。

错误处理的增强

Vue组件中的 errorCaptured 钩子和全局的 errorHandler 配置项现在可以捕获到异步产生的异常了，如组件中的v-on侦听函数和实例中的异步请求等。

动态指令参数

Vue 2.6中组件绑定的属性也可以是动态的了。更巧妙的是，如果该属性最终结果是null的话，Vue会自动移除该绑定。

<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>

编译警告位置信息

Vue 2.6中异常的位置信息将更加准确，便于调试。

显式创建响应式对象

Vue Conf大会中尤雨溪已经提前公布了Vue 3 会追加一个全局API——observable。这次在Vue 2.6中提前放出。

用Vue.observable()创建的对象可以直接用于属性计算(computed)，也会在被改动时触发相应的更新。

可直接在浏览器中引入的 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>

想要了解Vue相关最新的技术点，可以关注本公众号，这里会持续为你输出有用、有意思的前端技术文章。