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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
javascript实现数字时钟效果
Feb 06 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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP学习记录之数组函数
2018/06/01 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python实现批量修改文件名实例
2015/07/08 Python
jupyter安装小结
2016/03/13 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python实现可变变量名方法详解
2019/07/01 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
自主招生推荐信范文
2014/05/10 职场文书
经济国贸专业求职信
2014/06/18 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
Python机器学习之基础概述
2021/05/19 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android