Vue 2.6 "Macross" 發佈了，同時也是Vuejs五週年~
在這篇文章中，將會介紹新版本的新特性, 比如slots的新語法，Vue.observable()等等
1. Scoped slots(作用域插槽)的新語法
這是一個比較重大的改變，包含的有：
- v-slot新指令，結合了
slot和slot-scope的功能 -
scoped slots的簡寫
之前在[email protected]中是這樣使用scoped-slots的:
<template>
<TestComponent>
<! - 默認 scoped slot ->
<div slot-scope="{message}">
{{`Default slot with message: ${message}`}}
</ div>
<! - 具名 scoped slot ->
<div slot="text" slot-scope="{text}">
{{`Named slot with text: ${text}`}}
</ div>
</ TestComponent>
</ template>現在是這樣的：
<template>
<TestComponent>
<! - 默認 scoped slot ->
<template v-slot="{message}">
<div>
{{`Default slot with message: ${message}`}}
</ div>
</ template>
<! - 具名 scoped slot ->
<template v-slot:text="{text}">
<div>
{{`Named slot with text: ${text}`}}
</ div>
</ template>
</ TestComponent>
</ template>默認插槽：
<template>
<! - v-slot is used directly on the parent ->
<TestComponent v-slot="{message}">
<div>
{{`Default slot with message: ${message}`}}
</ div>
</ TestComponent>
</ template>具名插槽：
<template>
<TestComponent>
<! - # 簡寫: ->
<template #text="{text}">
<div>
{{`Named slot with text: ${text}`}}
</ div>
</ template>
</ TestComponent>
</ template>新版中，可以不使用任何作用域插槽變量，但是仍然可以通過父組件的$scopedSlots去引用到
2. 動態參數指令
如果我們想在v-bind or v-on中使用動態變量，在[email protected]中：
<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]: handler }"></div>但是這個例子有幾個缺點：
- 不是所有人都知道在
v-bind / v-on中可以使用動態變量名 -
vue-template-compier生成了低效的代碼 -
v-slot沒有類似的使用對象的語法
爲了解決這些問題，[email protected] 引入了一個新語法：
<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>舉個例子：
<template>
<div>
<! - v-bind 動態key ->
<div v-bind:[key]="value"> </ div>
<! - 簡寫 ->
<div :[key]="value"> </ div>
<! - v-on 動態事件，event變量 ->
<div v-on:[event]="handler"> </ div>
<! - 簡寫 ->
<div @[event]="handler"> </ div>
<! - v-slot 動態名字 ->
<TestComponent>
<template v-slot:[name]>
Hello
</ template>
</ TestComponent>
<! - 簡寫 ->
<TestComponent>
<template #[name]>
Cool slot
</ template>
</ TestComponent>
</ div>
</ template>3. 使用Vue.observable()創建一個響應對象
之前，創建一個響應對象，必須在一個Vue實例中配置。現在我們可以在Vue實例外部，通過使用Vue.observable(data)創建，如下：
import vue from vue;
const state = Vue.observable ({
counter: 0,
});
export default {
render () {
return (
<div>
{state.counter}
<button v-on:click={() => {state.counter ++; }}>
Increment counter
</ button>
</ div>
);
},
};4. server端獲取數據
在新的升級版本中，vue-server-renderer改變了SSR的數據加載策略。
之前，我們推薦使用asyncData ()在router.getMatchedComponents ()方法中獲取的組件中，獲取數據。
新版本中有一個特別的組件方法：serverPrefetch() 。vue-server-renderer會在每個組件中調用它，它會返回一個promise。
<template>
<div v-if="item">
{{item.name}}
</ div>
</ template>
<script>
export default {
// Call on the server
async serverPrefetch () {
await this.fetchItem();
},
computed: {
item () {
return this.$store.state.item;
},
},
// Call on client
mounted () {
if (!this.item) {
this.fetchItem();
}
},
methods: {
async fetchItem () {
await this.$store.dispatch('fetchItem');
},
},
};
</ script>在serverPrefetch()執行之後，我們需要知道應用在什麼時候渲染完成，在server render 上下文中，我們可以使用rendered()鉤子方法。
/ * Simplified entry-server.js * /
import {createApp} from './app';
export default context => new Promise ((resolve, reject) => {
const {app, router, store} = createApp();
const {url} = context;
router.push(url);
router.onReady(() => {
context.rendered = () => {
context.state = store.state;
};
resolve (app);
}, reject);
});5. 改進的錯誤輸出
在render方法中編譯html，vue-template-compiler可能會產生錯誤。在之前，Vue會產生一個沒有位置的錯誤描述。新版本中會展示這個錯誤出現在哪裏，比如：
<template>
<div>
<template key="test-key">
{{ message }}
</template>
</div>
</template>
Error compiling template:
<div>
<template key="test-key">
{{ message }}
</template>
</div>
- <template> cannot be keyed. Place the key on real elements instead.Errors compiling template:
<template> cannot be keyed. Place the key on real elements instead.
1 |
2 | <div>
3 | <template key="test-key">
| ^^^^^^^^^^^^^^
4 | {{ message }}
5 | </template>6. 捕捉異步錯誤
現在Vue可以在生命週期方法鉤子和事件方法中捕捉到異步錯誤異常。比如：
/ * TestComponent.vue * /
<template>
<div @click="doSomething()">
Some message
</ div>
</ template>
<script>
export default {
methods: {
async doSomething () {
await this.$nextTick ();
throw new Error ('Another Error');
},
},
async mounted () {
await this.$nextTick ();
throw new Error ('Some Error');
},
};
</ script>mount後錯誤：
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"點擊事件後錯誤：
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"7. ESM 瀏覽器中的新版構建
新版本中，增加了一個vue.esm.browser.js。它是爲了支持ES6 Modules的瀏覽器設計的。
特性：
- 在render函數中，包含HTML編譯器
- 使用ES6模塊語法
- 包含非副本代碼(non-transcript)
舉例：
<html lang="en">
<head>
<title> Document </ title>
</ head>
<body>
<div id="app">
{{message}}
</ div>
<script type="module">
import Vue from 'path/to/vue.esm.browser.js';
new Vue {{
el: '#app',
data () {
return {
message: 'Hello World!',
};
},
});
</ script>
</ body>
</ html>8. v-bind.prop簡寫
v-bind指令有一個特殊的修飾符---.prop。你可以在文檔中查看具體用法。我自己從沒使用過，暫時也想不到在什麼時候使用。
現在有一個簡寫方式，對於v-bind:someProperty.prop="foo", 可以寫成.someProperty="foo"
<template>
<div>
<div v-bind:textContent.prop="'Important text content'" />
<! - 簡寫版本 ->
<div: textContent.prop="'Important text content'" />
</ div>
</ template><template>
<div .textContent="'Important text content'" />
</template>9. 支持自定義toString()
規則很簡單：如果重寫了對象的toString()方法，顯示的時候，Vue將使用它，而不是JSON.stringify()
舉例：
/ * TestComponent.vue * /
<template>
<div>
{{message}}
</ div>
</ template>
<script>
export default {
data () {
return {
message: {
value: 'qwerty',
toString () {
return 'Hello Habr!';
},
},
};
},
};
</ script>{ "value": "qwerty" }Hello Habr!10. v-for和可迭代對象
在新版本中，v-for可以遍歷任何實現了iterable協議的對象，比如Map, Set。
在2.X版本中，Map和Set, 不支持數據響應。
舉例：
/ * TestComponent.vue * /
<template>
<div>
<div
v-for="item in items"
:key="item"
>
{{item}}
</ div>
</ div>
</ template>
<script>
export default {
data () {
return {
items: new Set([4, 2, 6]),
};
},
};
</ script>