Vue过滤器原理

Vue过滤器
- 什么是Vue过滤器
- 定义Vue过滤器
  - 组件的选项中定义本地的过滤器
  - 或者在创建 Vue 实例之前全局定义过滤器
  - 单个器原理
  - 串联过滤器
  - 过滤器参数接收
- _f函数的原理
  - 过滤器解析原理
- 总结： vue 过滤器原理

Vue过滤器

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理。

我们看一下官方的定义:

Vue.is 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式(后者从 2.1.0+开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

什么是Vue过滤器

Vue过滤器是一种用于在模板中对数据进行处理和格式化的功能。

它可以用来实现一些常见的文本格式化操作，例如日期格式化、数字格式化、字符串截取等。通过使用过滤器，我们可以在模板中直接调用过滤器函数，并将数据作为参数传递给它，然后使用过滤器函数对数据进行处理，最后返回处理后的结果。

在Vue中，过滤器可以用在 插值表达式、指令和绑定 等地方。

过滤器可以通过 全局注册或局部注册 的方式进行定义。

全局注册的过滤器可以在任何组件的模板中使用，而局部注册的过滤器只能在当前组件的模板中使用。

下面是一个示例，展示了如何定义和使用一个Vue过滤器：

<template><div><p>{{ message | capitalize }}</p><p>{{ price | currency }}</p><p>{{ date | formatDate('YYYY-MM-DD') }}</p></div>
</template><script>
export default {data() {return {message: 'hello world',price: 100.5,date: new Date()};},filters: {capitalize(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);},currency(value) {if (!value) return '';return '$' + value.toFixed(2);},formatDate(value, format) {// 省略日期格式化的具体实现}}
};
</script>

在上面的示例中，我们定义了三个过滤器：

capitalize、
currency
formatDate。

capitalize过滤器将字符串的首字母大写，currency过滤器将数字格式化为货币形式，formatDate过滤器将日期格式化为指定的格式。

在模板中，我们使用|符号来调用过滤器，并将需要处理的数据作为参数传递给它们。

注意：过滤器只能用于单向数据绑定，也就是说，它们不会修改原始数据，而是返回一个新的处理后的值。

如果需要在双向绑定中对数据进行处理，应该使用计算属性或侦听器来实现。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

定义Vue过滤器

<!- - 在双花括号中 -->
{{ message | capitalize }}<!-- 在v-bind~中 -->
<div v-bind:id="rawId | formatId"></div>

组件的选项中定义本地的过滤器

filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUppercase() + value.slice(1)}
}

或者在创建 Vue 实例之前全局定义过滤器

Vue.filter('capitalize', function (value) { if (!value) return ''value = value .toString()return value.charAt(0) .toUppercase() + value.slice(1)}
)
new Vue({// ...
}}

过滤器函数总接收表达式的值(之前的操作链的结果)作为第一个参数。

在上述例子中capitalize 过滤器函数将会收到 message 的值作为第一个参数。过滤器可以串联

{{message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。

然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数，因此可以接收参数

{{message filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串’arg1 作为第二个参数，表达式 arg2 的值作为第三个参数。

单个器原理

{{ message | capitalize}}

上面的过滤器经过一顿操作之后就会变成 _s(_f("capitalize")(message))

f: 该函数其实就是resolveFilter的别名，作用是从_this.$options.filter 找到过滤器并返回
s: 该函数就是toString函数的别名，作用是拿到过滤之后的结果并传递给toString()函数，结果会保存到VNode中的text届性，返回结果直接渲染视图

串联过滤器

上面的串联过滤器经过一顿操作之后就会变成 _s(_f("filterB")(_f("filterA")(message)))

这里的意思就是message作为第一个参数传进filterA当中，然后经过filterA的处理结果就传进filterB当中。 即filterA过滤器的结果就是fiterB过滤器的输入

过滤器参数接收

以上的过滤器的编译结果就是 _s(_f("filterB")(_f("filterA")(message), "param") )

这里有一点注意的是:这个param参数是filterB的第二个参数，它的第一个参数是经过filterA处理的结果。

_f函数的原理

_f函数其实就是寻找过滤器的，如果找到过滤器就返回过滤器，找不到就返回与参数相同的值。

它的代码其实很简单

import {fidentity, resolveAssets} from 'core/util/index'export function resolveFilter(id){return resolveAssets(this.$options,'filters', id,true) || identity
}

我们重点来看一下resolveAssets到底做了什么事情。

export function resolveAsset (options, type, id,warnMissing){if(typeof(id) !== 'string'){return}const assets = options[type] 
if(hasOwn(assets,  id)) return assets[id]const camelizedId = camelize(id)
if(hasOwn(assets, camelizedId)) return assets[camelizedId]const PascalcaseId = capitlize(camelizedId)
if(hasOwn(assets, PascalcaseId)) return assets[PascalcaseId//检查原型链
const res assets[id] || assets[camelizedId] ||  PascalcaseId
if(process.enV.NODE_ENV!=='production'&& warnMissing && !res){warn('Fail to resolve' + type.slice(0,-1)+':'+id, options)
}
return res