前言

本文主要講解管道在Vue和Angular中有哪些作用以及React對于管道概念的替代方案是什么。

管道起源

計算機中的Pipline（管道）常被認為起源于Unix，最初Mcllroy發現很多時候人們會將shell命令的輸出傳遞給另一個shell命令，類似于管道。所以就提出了管道的概念。并在1973年實現了這個管道概念，使用|作為pipe的語法符號。此后，很多操作系統也引入了pipe概念，而Angular和Vue框架都引入了這個概念。

管道特點

• 各個管道高內聚，專注解決某個問題。
• 多個管道可以組合起來用于解決某個特定的問題

前端中管道概念和作用

概念

在Vue和Angular當中，pipe（管道）更像是一種設計模式，一種思想，它也能體現出函數式編程：利用多個函數組合到一起用于解決某個特定的問題。強調組合大于繼承。同時又分為內置管道和自定義管道，內置管道加粗樣式就是框架中自己封裝好的管道，拿來就可以用的管道。還可以通過自定義的方式自己封裝一個管道進行使用。
angular內置管道：

DatePipe：根據本地環境中的規則格式化日期。UpperCasePipe：字符串全部轉換大寫。
LowerCasePipe ：字符串全部轉換成小寫。
CurrencyPipe ：把數字轉換成貨幣字符串，根據本地環境中的規則進行格式化。DecimalPipe：把數字轉換成帶小數點的字符串，根據本地環境中的規則進行格式化。
PercentPipe ：把數字轉換成百分比字符串，根據本地環境中的規則進行格式化。

Vue內置管道：

capitalize：將字符串的第一個字符轉換為大寫
uppercase：字符串全部轉換大寫。
lowercase：字符串全部轉換成小寫。
currency：把數字轉換成貨幣字符串，根據本地環境中的規則進行格式化。
date：將日期格式化為特定格式

作用

利用一個或者多個管道解決某個問題，比如我們想要一個數據是大寫的文本，就可以通過{{ data | UpperCasePipe}}進行格式化，這樣獲取到的數據就都是大寫的了，那同時我們想要定義首字母大寫的文本可以通過，創建一個自定義管道FirstUpper，來進行轉換，同時這些管道之間也是可以進行組合使用。可以**{{ data | uppercase | lowercase}}**同時使用，那么這時就進行了兩個操作，第一是大寫，第二是小寫，最終獲得的就是小寫的字符串文本。

React關于管道的替代方案

React本身并沒有引入管道的概念，我們知道Angular和Vue是雙向數據綁定，它們的符號是{{}}，而在react中，所有{}其中的計算的所有內容都是JavaScript，可以通過在{}中調用某個方法來進行操作，如大寫toUpperCase(),就可以寫{ data.toUpperCase() }所以沒有也不需要管道的概念。管道的內容可以直接通過React創建方法并在括號的數據中調用來實現。

Vue和Angular管道的區別

Vue的管道過濾器和Angular用法相同，不同的是Vue中使用filters:{}內部進行管道符的定義。而Angular創建管道過程：

ng g pipe 文件夾名/文件名

Vue創建管道過程:：在Vue實例中創建，filters，在filters中創建管道過濾器即可。fitlers中Vue的管道是局部管道，如果不暴露，則無法被其他組件使用，同時Vue引入了全局管道的概念。Angular管道都是暴露的，可以被全局使用。
Vue全局管道定義方式：

Vue.filter("過濾器名稱", 處理函數 );