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操作textarea 常用方法总结
Dec 03 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
js实现计算器功能
2020/08/10 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python制作词云的方法
2018/01/03 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
运动会100米加油稿
2015/07/21 职场文书
运动会加油稿
2015/07/22 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Python中的pprint模块
2021/11/27 Python