2024年关于vue过滤器的原理解析(1)，2024年最新月薪20k+的前端面试都问些什么

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

---

{{ 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过滤器的结果就是filterB过滤器的输入。

过滤器参数接收

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

以上的过滤器的编译结果就是：

_s(_f("filterB")(_f("filterA")(message),"param"))

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

_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）：

• 判断过滤器id是否为字符串，不是则终止

• 用assets存储过滤器

• hasOwn函数检查assets自身是否存在id属性，存在则返回

• hasOwn函数检查assets自身是否存在驼峰化后的id属性，存在则返回

• hasOwn函数检查assets自身是否存在将首字母大写后的id属性，存在则返回

• 如果还是没有，就是去原型链找，找不到就会打印警告

过滤器解析原理

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

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

03 小结

---

其实过滤器的作用有很多，相信大家对时间的格式化也有很多的处理方法，其中一个就是可以利用过滤器来格式化时间。而且我们知道，过滤器它是可以支持链式的操作，很方便地对变量进行多步处理，然后返回你想要的结果。

过滤器的原理其实很简单，无非就是在编译阶段就把过滤器编译成函数进行调用，串联的过滤器就是嵌套调用。关于编译成函数的时候就是利用vue的内部函数parseFilters，解析过滤器列表并进行拼接字符串。

参考文章：

• 深入浅出vue.js
  

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】