Vue中过滤与计算的区别与用法解析 - 行业资讯 - 肥雀云

看:监控已有属性,一旦属性发生了改变就去自动调用对应的方法

计算:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法

过滤器:js中为我们提供的一个方法,用来帮助我们对数据进行筛选

1.看监控现有的属性,计算通过现有的属性计算出一个新的属性

2.看不会缓存数据,每次打开页面都会重新加载一次,

但是计算如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中
　　得到数据(所以计算的性能比手表更好一些)

最近遇到一个很不错的候选人,经验丰富,有技术亮点,但在一些细枝末节问题上没有回答的很好,最终还是被刷了。面试过程中有一个问题我印象特别深刻:Vue中过滤与计算属性的区别,可惜候选人在现场没有回答上,这里总结一下:

<强> 1。触发时机不同

计算属性背后的处理逻辑比较复杂,依赖Vue的数据更新通知机制,在属性所依赖的其他数据项发生变化时才会重新触发计算。优点是计算频率相对较低;缺点是依赖于组件,难以抽取成独立逻辑,也就是复用性低。

过滤器则显的简单很多,只在显式调用时触发,一般应用在模板渲染上。优点是容易在组件外抽象;缺点是每次模板渲染时都需要重新执行计算。可以通过示例感受调用时机的区别:

<强> 2。应用范围不同

计算很广泛,可以应用在其他计算,方法,生命周期函数、模板;过滤一般只应用于模板渲染上,如果要在其他位置复用,需要使用。_f函数:

　　　　　　Vue.component (“HelloWorld”{ 　　过滤器:{ 　　你好(){ 　　返回“你好”; 　　} 　　}，　　方法:{ 　　ping () { 　　返回“$ {this._f(“你好”)()}世界”; 　　} 　　} 　　}) 　　　　

另外,在使用上过滤支持链式调用,这为其增加了组合拼接的能力:

<代码> & lt; span>{{名称| |利用正常化}}& lt;/span>

最后需要指出,计算属性只能在组件内部或通过mixin对象定义,而滤波器有两种定义方式,一是在组件内部通过过滤器属性定义,一是在组件外部通过Vue。过滤器函数定义:

　　　　　　Vue.component (“HelloWorld”{ 　　过滤器:{ 　　你好(){ 　　返回“你好”; 　　} 　　} 　　}); 　　Vue。过滤器(‘你好’,()=比;“你好”); 　　　　

应用规则

综上、过滤无法缓存,调用频率高,因此特别适用于格式化输出场景,比如日期格式化.filter具有组合调用能力,因此可以在项目架构层面定义一堆基础的,简单的过滤器,按需在组件内组合适用。

计算属性具有缓存能力,在组件内普适性更强,因此适用于复杂的数据转换,统计等场景。

以上所述是小编给大家介绍的Vue中过滤与计算的区别与用法解析,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
　　如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!