过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
{{ message | capitalize }}
创建过滤器的方式
- Vue.filter('id',function(){}) 全局过滤器定义
- 组件中 filters : { 'id' : function(){} } 组件内部过滤器
源码分析
一、编译阶段
parse阶段
我们发现对于过滤器的使用方式有两种：
- 在属性中 v-bind:id="xxx | filterA"
- 在文本双花括号插值中 {{xxx | filterA | filterB(arg1,arg2)}}
1. 属性中 v-bind:id="xxx | filterA"
在parse处理开始节点的processAttrs() 中发现了 通过bindRE.test(name)去匹配响应式的属性，然后通过 parseFilters(value) 去解析值中的过滤器。
if (bindRE.test(name)) { // v-bind
// 获取属性的名称 移除 : | v-bind:
name = name.replace(bindRE, '')
// 处理value 解析成正确的value
value = parseFilters(value)
isProp = false
}
解析过滤器的方法其实很简单：
- 将属性的值从前往后开始一个一个匹配，关键符号 : "|" 并排除 ""、 ''、 ``、 //、 || (字符串、正则)中的管道符号 '|' 。
如：
字符一个一个往后匹配 如果发现 ` " ' 说明在字符串中，那么直到找到下一个匹配的才结束， /一样 同时 匹配 () {} [] 这些需要两边相等闭合 那么 | 才有效， 最后一个条件排除 || 即可
- 所以上面直到遇到 第一个正确的 | ，那么前面的表达式 并存储在 expression 中，后面继续匹配再次遇到 | ,那么此时 expression有值， 说明这不是第一个过滤器 pushFilter() 去处理上一个过滤器
生成过滤器的 表达式字符串
如上面的
exp = message
filters = ['filterA','filterB(arg1,arg2)']
第一步 以exp 为入参 生成 filterA 的过滤器表达式字符串 _f("filterA")(message)
第二步 以第一步字符串作为入参 生成第二个过滤器的表达式字符串 _f("filterB")(_f("filterA")(message),arg1,arg2)
=> _f("filterB")(_f("filterA")(message),arg1,arg2)
* @param {string} exp 上一个过滤器的值 没有就是 表达式的值
* @param {string} filter
* @returns {string}
*/
function wrapFilter(exp: string, filter: string): string {
// 判断是否存在入参， 即 'filterB(arg1,arg2)'
const i = filter.indexOf('(')
if (i < 0) {
// 如果不是 直接生成 "_f("filterA")(message)"
// _f: resolveFilter
return `_f("${filter}")(${exp})`
} else {
// 过滤器名称
const name = filter.slice(0, i)
// 过滤器自定义入参
const args = filter.slice(i + 1)
// 生成 "_f("filterB")(message,arg1,arg2)"
return `_f("${name}")(${exp}${args !== ')' ? ',' + args : args}`
}
}
此时 exp = message + 'xxx|bbb' + (a||b) + cccc , filter = filterA
- 继续判断 过滤器是否存在 ()， 此时不存在, 那么filter就是名称 第一个入参就是前面的 exp。
生成
- 以前面的结果为exp , 发现存在 ( , 然后生成
2. 文本双花括号插值中 {{ message | capitalize }}
文本的处理是在 parse中的chars()方法 其中存在一个解析 {{}} 的方法 parseText()
export function parseText(
text: string,
delimiters ? : [string, string]
): TextParseResult | void {
// 处理 文本内容 如：
// {{obj.name}} is {{obj.job}}
while ((match = tagRE.exec(text))) {
// ' {{obj.name}} is {{obj.job}} ' => [ 0: '{{obj.name}}' , 1: 'obj.name' ,index : 1, input: ' {{obj.name}} is {{obj.job}} ']
// match.index 获取当前匹配的 开始下标
index = match.index
// push text token
// 如果 {{ }}的前面存在 静态的文本 如 (空格..{{xx}} xxx {{}})那么需要将这些静态文本保存
if (index > lastIndex) {
rawTokens.push(tokenValue = text.slice(lastIndex, index))
// 将静态文本保存在 tokens
tokens.push(JSON.stringify(tokenValue))
}
// tag token
// 解析过滤器
const exp = parseFilters(match[1].trim())
//生成当前参数在Vue render中获取响应式数据的方法 _s('obj.name') => this['obj.name']
tokens.push(`_s(${exp})`)
}
}
发现 其也是通过const exp = parseFilters(match[1].trim()) 去处理 {{}}中的额过滤器。
render阶段
我们发现在编译节点如果遇到过滤器 会将其编译成 _f(){}的表达式
"_f("filterB")(_f("filterA")(message + 'xxx|bbb' + (a||b) + cccc),arg1,arg2)"
core\instance\render-helpers\resolve-filter.js
- Runtime helper for resolving filters
*/
export function resolveFilter (id: string): Function {
return resolveAsset(this.$options, 'filters', id, true) || identity
}
其还是通过resolveAsset去获取 vm.$options的filters中相同的过滤器
然后将 _f("filterA")(message + 'xxx|bbb' + (a||b) + cccc ),arg1,arg2 作为入参。