The role of pipes in Vue and Angular and alternatives to React

Preface

This article mainly explains what role pipes play in Vue and Angular and what is React's alternative to the pipe concept.

Pipe Origin

Pipelines in computers are often thought to have originated from Unix. Initially, Mcllroy discovered that many times people would pass the output of a shell command to another shell command, similar to a pipe. So the concept of pipelines was proposed. And implemented this pipe concept in 1973, using | as the syntax symbol of pipe. Since then, many operating systems have also introduced the pipe concept, and both the Angular and Vue frameworks have introduced this concept.

Pipe characteristics

• Each pipeline is highly cohesive and focused on solving a certain problem.
• Multiple pipelines can be combined to solve a specific problem

The concept and role of pipelines in the front-end

concept

BetweenVue and Angular, pipe ) is more like a design pattern, an idea, it can also reflect Functional programming: using multiple functions to combine together to solve problems a specific problem. Emphasizethat composition is greater than inheritance. At the same time, they are divided into built-in pipes and custom pipes. Built-in pipesbold style are pipes that are self-encapsulated in the framework and can be used immediately. . You can also encapsulate a pipeline in a customized way for use.
angular built-in pipeline:

DatePipe：根据本地环境中的规则格式化日期。
 UpperCasePipe：字符串全部转换大写。
LowerCasePipe ：字符串全部转换成小写。
CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
 DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

Vue internal tube:

capitalize：将字符串的第一个字符转换为大写
uppercase：字符串全部转换大写。
lowercase：字符串全部转换成小写。
currency：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
date：将日期格式化为特定格式

effect

Use one or more pipelines to solve a certain problem. For example, if we want the data to be uppercase text, we can format it through{ { data | UpperCasePipe}}, so that the data obtained will be It is in uppercase. At the same time, if we want to define the text with the first letter in uppercase, we can create a custom pipe FirstUpper to convert it. At the same time, these pipes can also be combined and used. It can be used **{ { data | uppercase | lowercase}}** at the same time, then two operations are performed, the first is uppercase, the second is lowercase, and the final result is a lowercase string text.

React alternatives to pipes

React itself does not introduce the concept of pipelines. We know that Angular and Vue are two-way data binding, and their symbols are { {}}. In react, all < a i=2>All the calculations are in JavaScript, and can be operated by calling a method in {}. For example, in capital letters , you can write So there is no and no need for the concept of pipelines. The contents of the pipe can be implemented directly via the React creation method and called within the bracketed data. {}toUpperCase(){ data.toUpperCase() }

The difference between Vue and Angular pipelines

Vue's pipe filter is used the same as Angular. The difference is that Vue uses filters:{} internally to define the pipe character. And Angular creates the pipeline process:

ng g pipe 文件夹名/文件名

Vue pipeline creation process: Create filters in the Vue instance, and create pipeline filters in filters. The Vue pipeline in fitlers is a local pipeline. If it is not exposed, it cannot be used by other components. At the same time, Vue introduces the concept of global pipelines. Angular pipelines are exposed and can be used globally.
Vue global pipeline definition method:

Vue.filter("过滤器名称", 处理函数 );