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届性，返回结果直接渲染视图

串联过滤器

{{ message | filterA | filterB }}

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

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

过滤器参数接收

{{ message | filterA | fiterB(“param”) }}

以上的过滤器的编译结果就是 _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 

其实它的寻找过程也很简单，主要是做了以下的操作 (id是过滤器id):

• 判断过滤器id是否为字符串，不是则终止
• 用assets存储过滤器
• hasOwn函数检查assets自身是否存在id届性，存在则返回
• hasOwn函数检查assets自身是否存在 驼峰化后的 id属性，存在则返回
• hasOwn函数检查assets自身是否存在将 首字母大写后的 id属性，存在则返回
• 如果还是没有，就是去原型链找，找不到就会打印警告

过滤器解析原理

我们想一下，解析器是怎么解析过滤器的语法?

其实在vue内部专内有这么一个函数用来解析过滤器语法。parseFilters

它的原理就是解析过滤器列表，然后 循环过滤器列表 并 拼接字符串。

总结： vue 过滤器原理

Vue过滤器的原理主要是在编译阶段将过滤器编译成函数进行调用。

具体来说，Vue内部有一个专门用来解析过滤器语法的函数——parseFilters，它解析过滤器列表并循环过滤器列表，拼接字符串。过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理。