[原文鏈接 ]
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 並且沒有處理可能返回數組的情況,那么可能會需要進行相應的修正。