Vue 2.6 嚐鮮
昨天Vue 2.6 "Macross" 釋出了，同時也是Vuejs五週年~
在這篇文章中，將會介紹新版本的新特性, 比如slots
的新語法，Vue.observable()
等等
1. Scoped slots(作用域插槽)的新語法
這是一個比較重大的改變，包含的有：
-
v-slot新指令，結合了
slot和slot-scope的功能 -
scoped slots的簡寫
之前在[email protected]
中是這樣使用scoped-slots
的:
現在是這樣的：
預設插槽：
具名插槽：
新版中，可以不使用任何作用域插槽變數，但是仍然可以通過父元件的$scopedSlots
去引用到
2. 動態引數指令
如果我們想在v-bind
orv-on
中使用動態變數，在[email protected]
中：
但是這個例子有幾個缺點：
-
不是所有人都知道在
v-bind/v-on中可以使用動態變數名 -
vue-template-compier生成了低效的程式碼 -
v-slot沒有類似的使用物件的語法
為了解決這些問題，Vue@2.6.0
引入了一個新語法：
舉個例子：
3. 使用Vue.observable ()建立一個響應物件
之前，建立一個響應物件，必須在一個Vue例項中配置。現在我們可以在Vue例項外部，通過使用Vue.observable(data)
建立，如下：
4. 從伺服器下載資料
在新的升級版本中，vue-server-renderer
改變了SSR的資料載入策略。
之前，我們推薦使用asyncData()
在router.getMatchedComponents()
方法中獲取的元件中，獲取資料。
新版本中有一個特別的元件方法：serverPrefetch()
。vue-server-renderer會在每個元件中呼叫它，它會返回一個promise。
在serverPrefetch()
執行之後，我們需要知道應用在什麼時候渲染完成，在server render 上下文中，我們可以使用rendered()
鉤子方法。
5. 改進的錯誤輸出
在render
方法中編譯html，vue-template-compiler
可能會產生錯誤。在之前，Vue會產生一個沒有位置的錯誤描述。新版本中會展示這個錯誤出現在哪裡，比如：
在[email protected]中:
在[email protected]中：
6. 捕捉非同步錯誤
現在Vue 可以在生命週期方法鉤子和事件方法中捕捉到非同步錯誤異常。比如：
mount後錯誤：
點選事件後錯誤：
7. ESM 瀏覽器中的新版構建
新版本中，增加了一個vue.esm.browser.js 。它是為了支援ES6 Modules 的瀏覽器設計的。
特性：
-
在render函式中，包含HTML編譯器
-
使用ES6模組語法
-
包含非副本程式碼(non-transcript)
舉例：
8. v-bind.prop簡寫
v-bind
指令有一個特殊的修飾符---.prop
。你可以在文件中檢視具體用法。我自己從沒使用過，暫時也想不到在什麼時候使用。
現在有一個簡寫方式，對於v-bind:someProperty.prop="foo"
, 可以寫成.someProperty="foo"
在[email protected]中：
[email protected]:
9. 支援自定義toString ()
規則很簡單：如果重寫了物件的toString()
方法，顯示的時候，Vue將使用它，而不是JSON.stringify()
舉例：
[email protected]中顯示：
[email protected]:
10. v-for和可迭代物件
在新版本中，v-for
可以遍歷任何實現了[iterable 協議
]的物件，比如Map
,Set
。
在2.X 版本中，Map和Set, 不支援資料響應。
舉例：