Vue过滤器的原理

最新推荐文章于 2024-02-20 00:00:00 发布

大鲤余

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量667

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_47195133/article/details/124101140

版权

Vue 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue.js中的过滤器使用，包括在v-bind表达式和插值语法中的应用，以及过滤器的串联。解析了模板编译过程中过滤器的解析和执行流程，从resolveFilter到toString函数的转换，帮助开发者深入理解Vue过滤器的工作原理。

摘要由CSDN通过智能技术生成

过滤器使用方式

①v-bind表达式中

<div :mobile = 'mobile | fixMobile'></div>
filters:{
	fixMonile(value){
		return ....
	}
}

②插值语法中

<div >
	{{mobile | fixMobile}}
</div>

filters:{
	fixMonile(value){
		return ....
	}
}

实现原理

resolveFilter函数的返回结果是resolveAsset函数的返回结果，而resolveAsset函数做了一件事，就是查找过滤器
①过滤器会在模板编译中被编译成_s(_f(“fixMobile”)(mobile)),_f是resolveFilter函数的别名，这个函数会从vue身上的$options中的filters找出注册过的过滤器并返回，也就是说模板编译后相当于执行了this.$options.filters[‘fixMobile’]这个函数。
②_s是toString函数的别名。在这里插入图片描述
我们可以看到toString将val转化成子json格式字符串，第三个参数2是进行缩进相当于两个tab。这个函数执行完后的结果会保存到虚拟节点中的text属性中。

串联过滤器

过滤器可以串联，

<div >
	{{mobile | fixMobile | completedMobile}}
</div>
filters:{
	fixMobile(value){
		return ..
	},
	completedMobile(value){
		return ..
	}
}

经过模板编译后成为这个样子_s(_f(‘completedMobile’)(_f(‘fixMobile’)(mobile)))
这个代码实际上可以理解为this.$options.filters[‘completedMobile’]（this.$options.filters[‘fixMobile’](message)），就是把前一个过滤器的返回结果作为参数放到了后一个过滤器中。

总结过滤器的执行流程

①先进行模板编译
②解析过滤器，通过parseFilters函数，这个函数作用就是将过滤器解析成为一个函数调用表达式。
③resolveFilter函数再调用resolveAsset函数来查找对应过滤器并返回。
④然后执行完过滤器函数后，通过toString将结果放到虚拟节点的text属性中，然后渲染即可。