- 翻譯來源：https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e
- 翻譯時間：2019年2月5日09:48:43
就在2月5日，大年初一第一天，vue.js發(fā)布了最新版本2.6 release版本，
版本代號為： Marcross
翻譯如下：
昨天我么剛剛慶祝vue第五屆大會，今天我們很高興宣布退出了vue2.6版本 “Macross”!
在過去的一年中，我們花費(fèi)了很多時間研究新的vue-cli以及3.0的原型設(shè)計(jì)，也正因此很久都沒有發(fā)布vue2.x版本的迭代，現(xiàn)在是時候發(fā)布了！本文結(jié)合了本版本中重要的更新，一些實(shí)質(zhì)性的改進(jìn)和新功能，如果你想要了解詳細(xì)的信息，請務(wù)必在github官網(wǎng)查看完整發(fā)型版說明。
slot 新的語法 更好的學(xué)性能提升 以及漸進(jìn)式的接入vue3.0版本的語法
插槽一直都是一個重要的機(jī)制，可以在vue中實(shí)現(xiàn)很靈活的組件組合方式。在3.0的原型設(shè)計(jì)中，我們發(fā)現(xiàn)了很多改進(jìn)的方面。其中有一些改進(jìn)是可以不需要破壞式的更改就可以引入，這也允許我們在vue2.x版本引入。但是對于那些需要重大改變的變化，我們也在考慮努力提供漸進(jìn)式的替代方案，來讓遷移變得更加容易。
1. 新語法
第一個是插槽作用域的新語法，我們討論，設(shè)計(jì)了多個不同的實(shí)現(xiàn)，最終實(shí)現(xiàn)了 v-slot
<my-component>
<template v-slot:header>
<p>標(biāo)題</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>
新語法同意了單個指令中 普通插槽與作用域插槽的使用，并且強(qiáng)制使用更加明確和可讀的命名槽，現(xiàn)在的語法與vue2完全兼容，所以我們決定在vue2.6中發(fā)布。
如果你已經(jīng)熟悉了現(xiàn)有的插槽語法，那么我們建議你閱讀RFC來理解新語法背后的基本原理，如果你還不熟悉插槽，那么我們建議你查看更新版本的插槽語法文檔
2. 更好地性能提升
插槽的另外一方面語法改進(jìn)是我們希望在3.0中改進(jìn)的。實(shí)現(xiàn)了統(tǒng)一的普通插槽和范圍插槽，這是因?yàn)樽饔糜虿宀鄣男阅軆?yōu)勢。在父級的渲染周期中渲染正常插槽，當(dāng)插槽的依賴關(guān)系發(fā)生更改時，它會導(dǎo)致父組件和子組件重新渲染。另一方面，作用于插槽被便以為內(nèi)聯(lián)函數(shù)，在子組件渲染周期中被調(diào)用，這也意味著子組件具備了插槽所依賴的任何數(shù)據(jù)依賴，從而產(chǎn)生更精準(zhǔn)的更新。2.6中，我們引入了一種優(yōu)化策略，保證了父組件范圍依賴僅僅只會影響父組件，而且如果只是使用的是范圍插槽，不會強(qiáng)制更新子組件更新。
另外，
- 使用了新的v-slot語法中所有插槽都會編譯為范圍插槽，這意味著使用新語法的所有插槽都會自動獲得性能提升；
- 所有普通插槽現(xiàn)在也
this.$scipedSlots作為功能公開，這也意味著現(xiàn)在可以始終使用渲染函數(shù)，而不用模板語法的用戶，而this.$scopedSlots無需擔(dān)心傳入的插槽類型。
在 vue 3.0 中，將不再區(qū)分范圍和非范圍的插槽，所有的插槽將會使用統(tǒng)一語法，編譯為相同的格式，并且還會有最好的性能。
異步錯誤處理
vue中內(nèi)置錯誤處理機(jī)制：
- 組件內(nèi)
errorCaptured掛鉤 - 全局
errorHandler掛鉤
現(xiàn)在也會捕捉v-on處理程序內(nèi)部的錯誤，此外，如果您的任何生命周期鉤子或者事件處理程序制定了異步操作，那么你現(xiàn)在可以從該函數(shù)返回一個Promise，以方便來自于該P(yáng)romise調(diào)用中任何未被捕獲的錯誤也會發(fā)送給您的錯誤處理程序。當(dāng)然如果你使用的是 async/await ，就會變得更加容易，因?yàn)楫惒胶瘮?shù)隱式的返回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()
}
}
動態(tài)指令參數(shù)
動態(tài)指令參數(shù)現(xiàn)在可以接受 JavaScript 表達(dá)式了。
<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]>
動態(tài)插槽名稱
</template>
</my-component>
注意，如果參數(shù)值是null，現(xiàn)在會直接刪除 綁定/真挺器
編譯器警告消息中的代碼框架
在2.6之后，大多數(shù)模板編譯警告都會攜帶出錯源頭信息，這也讓我們能夠?yàn)檫@些警告生成漂亮的代碼錯誤提示。
顯示的創(chuàng)建 獨(dú)立的可觀察對象
vue2.6 提供了新的全局API，來顯示的創(chuàng)建一個獨(dú)立的觀察對象。
const reactiveState = Vuue.observable({
count:0;
})
這個返回的結(jié)果對象 可以被直接使用在 計(jì)算屬性或者渲染函數(shù)中，而且在更新和改變的時候也會被觸發(fā)。(一句話總結(jié)，就是和普通組件中的data屬性類似，但是卻不會侵入到代碼中)
服務(wù)端預(yù)渲染（ssr) 中的數(shù)據(jù)提前獲取
提供了新的生命周期鉤子 serverPrefetch 允許任何組件（包括了路由組件）的任何位置可以在服務(wù)端預(yù)處理數(shù)據(jù)，從而允許你更加輕松的使用和減少數(shù)據(jù)獲取與路由器之間的耦合。
例如nuxt已經(jīng)計(jì)劃使用 vue-apollo 計(jì)劃使用這個新功能來簡化邏輯。
可以直接import的ES module 模塊
vue2.6可以直接使用 import語法
<script type="module">
import Vue from 'http://demo.vue.browser.js'
new Vue({
// .......
})
</script>
重要的內(nèi)部改動
nextTick重新調(diào)整為全部使用 Microtask
在 2.5 當(dāng)中我們引入了一個改動，使得當(dāng)一個 v-on DOM 事件偵聽器觸發(fā)更新時，會使用 Macrotask 而不是 Microtask 來進(jìn)行異步緩沖。這原本是為了修正一類瀏覽器的特殊邊際情況導(dǎo)致的 bug 才引入的，但這個改動本身卻導(dǎo)致了更多其它的問題。在 2.6 里面我們對于原本的邊際情況找到了更簡單的 fix，因此這個 Macrotask 的改動也就沒有必要了。現(xiàn)在 nextTick 將會統(tǒng)一全部使用 Microtask。如果你對具體的細(xì)節(jié)感興趣，可以看這里。
this.$scopedSlots 函數(shù)統(tǒng)一返回?cái)?shù)組
（此改動只影響使用 render 函數(shù)的用戶）在 render 函數(shù)中，傳入的 scoped slot 以函數(shù)的形式被暴露在 this.scopedSlots 并且沒有處理可能返回?cái)?shù)組的情況，那么可能會需要進(jìn)行相應(yīng)的修正。更多細(xì)節(jié)參見這里。
2
