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, 不支援資料響應。
舉例: