Vue.js 中的片斷

做者：Nwose Lotanna

翻譯：瘋狂的技術宅

原文：blog.logrocket.com/fragments-i…

未經容許嚴禁轉載

在本文中將會給你介紹一個使人興奮的概念，它將幫你精通 Vue.js 。

在 Vue 中實現可訪問性

爲了實現 Web 上的可訪問性，你須要設計每一個人均可以使用的頁面、工具和技術。

這裏的「全部人」包括有着聽覺、認知、神經、身體、語言和視覺障礙的人。

爲了使諸如屏幕閱讀器之類的輔助技術可以解釋網頁和應用程序，無障礙支持是必需的。爲了使這些技術起做用，開發人員須要考慮可訪問性。

開始以前

本文適用於使用 Vue.js 的全部級別的前端開發人員，所以不須要了解初學者的概念和安裝過程便可理解這些概念。

在開始以前，這是你應該已經具有的一些先決條件。

你須要：

• 安裝了 Node.js 10.x 或更高版本。你能夠經過在終端或命令提示符下運行 node -v 來驗證。
• 安裝了 Node Package Manager 6.7 或更高版本（NPM）。
• 代碼編輯器：強烈建議使用 Visual Studio 代碼。
• Vue 的最新版本已在你的計算機上全局安裝。
• 在你的計算機上安裝了 Vue CLI 3.0。爲此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli
複製代碼

而後安裝新的：

npm install -g @vue/cli
複製代碼

要麼

• 在這裏下載 Vue 入門項目（github.com/viclotana/v…
• 解壓縮下載的項目
• 進入解壓目錄運行如下命令使全部依賴項保持最新：

npm install
複製代碼

問題：多個根節點

在 Vue 組件的模板部份內構建內容時，你可能會注意到，模板標籤內只能有一個根 HTML 標籤。

在這個根 HTML 標記內，你能夠根據須要建立任意數量的子節點，所以在 Vue 組件中不能有多個根節點。

若是你用 VS Code 打開了項目，請導航到 src 文件夾，而後導航到 components 文件夾，打開 app.js 文件。你的 app.js文件應以下所示：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script> import Test from './components/Test.vue' export default { name: 'app', components: { Test } } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

你能夠看到 div 是模板中惟一的根節點。若是你嘗試像這樣添加額外的根節點：

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
  <div>
    <h1>Header inside root node 2</h1>
  </div>
</span>
</template>
<script> import Test from './components/Test.vue' export default { name: 'app', components: { Test } } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

你會看到，保存時，Vue 編譯器將會提示有關具備多個根節點的錯誤。

額外的節點包裝器技術

爲了找到解決方法，Vue 開發人員常常會建立一個額外的（並且幾乎是沒必要要的）根節點包裝器，在其中能夠建立適合的子節點。

這裏的標籤能夠是 span 或 div 標籤。大多數 Vue 開發人員常用 div 標籤來確保他們的代碼塊不會產生致使破壞程序的錯誤。

這些額外的標籤除了防止產生錯誤外，什麼也不作。

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
  <div>
    <h1>Header inside root node 2</h1>
  </div>
</span>
</template>
<script> import Test from './components/Test.vue' export default { name: 'app', components: { Test } } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

這個方法的問題在於它不可訪問。

如今根據 HTML 指南，諸如列表項之類的語義標籤應該使用有序或無序列表標籤進行包裝。一樣，table 項應由 table 標籤包裝爲父標籤。

Demo

讓咱們用 App.vue 組件來渲染將要在 Test.vue 組件中建立的列表。

打開你的 App.vue 文件，而後在模板部分中複製如下代碼：

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ol>
      <Test />
    </ol>
    
  </div>
</span>
</template>
複製代碼

而後，在Test.vue組件中，將列表項放入模板部分，以下所示：

<template>
<div>
   <li>1. Array method</li>
   <li>2. Extra tag method</li>
   <li>3. fragments</li>
  </div>
</template>
複製代碼

上面的代碼塊不會由編譯器返回錯誤。實際上，它將被傳遞到 App.vue 組件中以正確渲染列表。

可是，若是你在 devtools 中檢查元素，則會發現它不返回語義 HTML。

若是不遵循這個語義，則你的 HTML 代碼可能會正常運行，但不會被屏幕閱讀器或語音轉換之類的輔助設備接收。

這就是爲何這種方法（被普遍使用）如今不被接受的緣由。一般人們傾向於編寫可訪問的代碼。

解決方案：片斷

這個概念是 React 團隊發佈版本 16 時提出的。這是針對開發人員行爲形成的可訪問性差距的解決方案。

該團隊找到了一種建立 HTML 標記的方法，該方法不會被 DOM 讀取爲節點，並將其稱爲片斷。

它的工做原理與 div 或 span 標記徹底相同，但不會改變代碼的總體結構，所以保持了 DOM 樹的語義。

React 片斷語法

render() {
    return ( 
       <React.fragment >
         <ChildA / >
         <ChildB / >
         <ChildC / >
       </React.fragment>
    );
}
複製代碼

在DOM中，以下所示：

<ChildA / >
<ChildB / >
<ChildC / >
複製代碼

片斷是不可見的包裝器標籤，不影響 DOM 的節點結構，從而實現了可訪問性。

Vue 中的 片斷

Vue團隊還沒有完成正式的片斷功能，可是 Vue 社區成員 Julien Barbay 構建了一個很棒的插件。

這個插件就像包裝器同樣。而後在 Vue 編譯時，它會在 DOM 上被註釋掉。

這是在 Vue 2.x 中使用片斷的很是有效的方法

語法以下所示：

<Fragment >
  <ChildA / >
  <ChildB / >
  <ChildC / >
 </Fragment>
複製代碼

在 DOM 中，其渲染結果以下：

<!--Fragment-->
  <ChildA / >
  <ChildB / >
  <ChildC / >
 <!--Fragment-->
複製代碼

你能夠看到有兩行被註釋掉了，所以 DOM 具備語義而且能夠訪問代碼。要使用它，請先在你的 Vue 項目中安裝插件：

npm install -s vue-fragment
複製代碼

而後導入它，你就能夠在 Test.vue 文件中使用了，以下所示：

<template>
<fragment>
   <li>1. Array method</li>
   <li>2. Extra tag method</li>
   <li>3. fragments</li>
</fragment>
</template>
<script> import { Fragment } from 'vue-fragment' export default { name: 'Test', components: { Fragment }, props: { msg: String } } </script>
複製代碼

你能夠看到div標籤已被片斷替換。如今，整個演示文稿均可以訪問了。

總結

在本文中，你學習瞭如何在 Vue 中使用片斷，並瞭解了爲何在寫代碼時要考慮可訪問性是很是重要的。

Vue 團隊已承諾在即將發佈的 Vue v3 中引入片斷功能。

Julien 的插件是一個很是有用的插件，你如今就能用。

歡迎掃碼關注前端公衆號：前端先鋒，免費領取 Vue、React 教程。