管道在Vue和Angular中的作用及React的替代方案

管道在Vue和Angular中的作用及React的替代方案

前言

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

管道起源

计算机中的Pipline(管道)常被认为起源于Unix,最初Mcllroy发现很多时候人们会将shell命令的输出传递给另一个shell命令,类似于管道。所以就提出了管道的概念。并在1973年实现了这个管道概念,使用|作为pipe的语法符号。此后,很多操作系统也引入了pipe概念,而Angular和Vue框架都引入了这个概念。

管道特点

  • 各个管道高内聚,专注解决某个问题。
  • 多个管道可以组合起来用于解决某个特定的问题

前端中管道概念和作用

概念

VueAngular 当中,pipe(管道)更像是一种设计模式,一种思想,它也能体现出函数式编程 :利用多个函数组合到一起用于解决某个特定的问题。强调组合大于继承 。同时又分为内置管道和自定义管道,内置管道加粗样式 就是框架中自己封装好的管道,拿来就可以用的管道。还可以通过自定义的方式自己封装一个管道进行使用。
angular内置管道

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

Vue内置管道

javascript 复制代码
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创建管道过程:

javascript 复制代码
ng g pipe 文件夹名/文件名

Vue创建管道过程::在Vue实例中创建,filters,在filters中创建管道过滤器即可。fitlers中Vue的管道是局部管道,如果不暴露,则无法被其他组件使用,同时Vue引入了全局管道的概念。Angular管道都是暴露的,可以被全局使用。

Vue全局管道定义方式:

javascript 复制代码
Vue.filter("过滤器名称", 处理函数 );
相关推荐
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
customer086 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
PleaSure乐事7 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo7 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v7 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家8 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙8 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
新星_8 小时前
函数组件 hook--useContext
react.js