Vue.js 2.6嚐鮮

時間 2019-11-08

標籤 vue.js vue 2.6 嚐鮮欄目 JavaScript 简体版

原文原文鏈接

Vue 2.6 "Macross" 發佈了，同時也是Vuejs五週年~html

在這篇文章中，將會介紹新版本的新特性, 好比slots的新語法，Vue.observable()等等vue

1. Scoped slots(做用域插槽)的新語法

這是一個比較重大的改變，包含的有：api

v-slot新指令，結合了slot 和 slot-scope的功能
scoped slots的簡寫

以前在Vue@2.5.22中是這樣使用scoped-slots的:promise

<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>

默認插槽：app

<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去引用到async

2. 動態參數指令

若是咱們想在v-bind or v-on中使用動態變量，在Vue@2.5.22中：函數

<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]: handler }"></div>

可是這個例子有幾個缺點：fetch

不是全部人都知道在v-bind / v-on中可使用動態變量名
vue-template-compier 生成了低效的代碼
v-slot沒有相似的使用對象的語法

爲了解決這些問題，Vue@2.6.0 引入了一個新語法：

<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>

在vue-template-compiler@2.5.22中:

Error compiling template:
<div>
    <template key="test-key">
      {{ message }}
    </template>
  </div>
- <template> cannot be keyed. Place the key on real elements instead.

在vue-template-compiler@2.6.0中：

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"

在Vue@2.5.22中：

<template>
   <div>
     <div v-bind:textContent.prop="'Important text content'" />
     <! - 簡寫版本 ->
     <div: textContent.prop="'Important text content'" />
   </ div>
</ template>

Vue@2.6.0:

<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>

Vue@2.5.22中顯示：

{ "value": "qwerty" }

Vue@2.6.0:

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。