Vue中过滤器(filter)的使用

我们想一下有methods为什么要有filter的存在呢，因为filter的实现效率比methods要高的多。

看一下官方定义：

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

1. 局部过滤器（使用最频繁）

语法

template

<div>{{ name | judgeRole }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>

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

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

_f函数的原理

_f函数其实就是寻找过滤器的，如果找到过滤器就返回过滤器，找不到就返回与参数相同的值。它的代码其实很简单：

import {identity, 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）：

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

过滤器解析原理

我们想一下，解析器是怎么解析过滤器的语法？其实在vue内部专门有这么一个函数用来解析过滤器语法：parseFilters

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

script

filter：{
    judgeRole(val) {
      if (val === '0') {
        return '平台'
      } else if (val === '1') {
        return '企业'
      } else if (val === '2') {
        return '企业用户'
      } else {
        return ''
      }
    }

}

说明

过滤器函数中的value,就是 |前面的值，它相当于第一个参数
在过滤器函数中一定要返回一个值，他就是我们对格式处理后的结果
通俗的来讲，当为一个数据绑定一个过滤器后，每一次渲染这个数据的时候，他都会调用相应过滤器的函数

实战

使用vue-cli下载一个默认的项目，我使用vue/cli4默认的目录如下

1.在components文件夹下新建FilterLoc.vue表示局部的过滤器，并写上如下代码，我们的目的是把sunwukong首字母变成大写

<template>
    <div>{{name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'sunwukong'
        }
    },
    filters:{
        //当value改变的时候，他会执行这个函数
        capitalize:function (value) {
            //一定要返回一个值才能在组件中正常显示
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2.我们在App.vue中引入并映射成组件

<template>
    <div><filter-loc></filter-loc></div>
</template>

<script>
import FilterLoc from '@/components/FilterLoc'
export default {
    components:{
        FilterLoc
    }
}
</script>

3.运行项目，观察效果，我们发下sunwukong首字母已经大写

2. 全局过滤器

1.我们可以在入口文件定义全局过滤器，当然也可以是其他文件，这里我们把最后一个首字母变成大写

main.js

/* 定义全局过滤器 */
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  const length = value.length - 1
  value = value.toString()
  return value.slice(0,length) + value.charAt(length).toUpperCase() 
})

2.在components文件夹下新建FilterGlo.vue表示使用全局过滤器，并写上如下代码，直接使用过滤器

<template>
    <div>{{name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'zhubajie'
        }
    }
}
</script>

3.我们在App.vue中引入并映射成组件，运行项目观察效果

说明
4. 其实刚刚我们定义了两个id相同的过滤器，但是我们发现局部的并没有改变，于是我们就发现了，过滤器的优先级：局部的要比全局的优先级高；

3. 串联过滤器

语法

<div>{{ message | filterA | filterB }}</div>

后一个过滤器接收的参数为前一个参数的返回值

实战

1.在components文件夹下新建FilterSer.vue表示使用串联过滤器，并写上如下代码，直接使用全局过滤器(尾字母大写)，和我们自定义的过滤器(首字母大写)

<template>
    <div>{{name|initalWord|capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'shawujing'
        }
    },
    filters:{
        initalWord:function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2.我们在App.vue中引入并映射成组件，运行项目观察效果，我们发现两个选择器都使用上了

4. 过滤器的参数

语法

<div>{{ message | filterA('arg1', arg2) }}</div>

实战

在components文件夹下新建FilterParam.vue表示使用过滤器参数，并写上如下代码，定义了一个过滤器，并传递了参数

<template>
    <div>{{name|paramsFil('白骨精','白龙马')}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'师徒四人'
        }
    },
    filters:{
        paramsFil:function (value,arg1,arg2) {
            console.log(value,arg1,arg2)
            return value + arg1 + arg2
        }
    }
}
</script>

我们在App.vue中引入并映射成组件，运行项目观察效果带上了所需要的参数。