vue 2.6 更新變動


[原文鏈接 ]

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM