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 getElementsByClassName函数
Apr 01 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Javascript创建类和对象详解
May 31 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python安装Scrapy图文教程
2017/08/14 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python把转列表为集合的方法
2019/06/28 Python
pytorch 预训练层的使用方法
2019/08/20 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
股份合作协议书范本
2014/04/14 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
大学生团日活动总结
2015/05/06 职场文书
2015年暑假工作总结
2015/07/13 职场文书