2024年Web前端最新关于vue过滤器的原理解析，学习指南

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

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

{{ message | filterA(‘arg1’, arg2) }}

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

02 过滤器原理

---

{{ 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属性，存在则返回

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

过滤器解析原理

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

9. 如何判断一个单链表有环

   [外链图片转存中…(img-m5ucO1Sg-1714959397583)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】