Vue 中 filter 与 computed 的区别与用法解析


Posted in Javascript onNovember 21, 2019

watch与computed、filter:

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

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

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

watch与computed的区别:

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

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

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

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

filter 与 computed 的区别

1. 触发时机不同

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

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

Vue 中 filter 与 computed 的区别与用法解析

2. 应用范围不同

computed 很广泛,可以应用在其他computed、methods、生命周期函数、模板;filter 一般只应用于模板渲染上,如果要在其他位置复用,需要使用 this._f 函数:

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 },
 methods: {
 ping() {
 return `${this._f('hello')()} world`;
 }
 }
})

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

<span> {{ name | normalize | capitalize }} </span>

3. 定义方式

最后需要指出,computed 属性只能在组件内部或通过mixins对象定义;而 filter 有两种定义方式,一是在组件内部通过 filters 属性定义;一是在组件外部通过 Vue.filter 函数定义:

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 }
});
Vue.filter('hello', ()=> 'hello');

应用规则

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

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

总结

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

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
项目实践之javascript技巧
Dec 06 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JS敏感词过滤代码
Dec 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
微信小程序实现星级评价
Nov 20 #Javascript
微信小程序音乐播放器开发
Nov 20 #Javascript
微信小程序实现音乐播放器
Nov 20 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
认识并使用PHP超级全局变量
2010/01/26 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
如何进行有效的自我评价
2013/09/27 职场文书
会议邀请函范文
2014/01/09 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
房产买卖委托公证书
2014/04/04 职场文书
家长通知书家长评语
2014/04/17 职场文书
争先创优心得体会
2014/09/12 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
导游词之安徽九华山
2019/09/18 职场文书