管道在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("过滤器名称", 处理函数 );
相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥1 小时前
Vue框架之钩子函数详解
vue.js
四季豆豆豆1 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
杨进军2 小时前
React 实现多个节点 diff
前端·react.js·前端框架
杨进军2 小时前
React 实现 useState
前端·react.js·前端框架
拾光拾趣录3 小时前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
江城开朗的豌豆6 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆6 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆6 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js