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 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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实现的MySQL通用查询程序
2007/03/11 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
js实现文字滚动效果
2016/03/03 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
js实现碰撞检测
2021/01/29 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
自我鉴定模板
2013/10/29 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
疾病证明书
2015/06/19 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Pytest中conftest.py的用法
2021/06/27 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js