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 09 Javascript
绑定回车enter事件代码
May 18 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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 array_multisort() 函数的深入解析
2013/06/20 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php实现小程序支付完整版
2018/10/09 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python使用super()出现错误解决办法
2017/08/14 Python
django富文本编辑器的实现示例
2019/04/10 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
Python的两道面试题
2013/06/29 面试题
大学自荐信
2013/12/12 职场文书
促销活动总结报告
2014/04/26 职场文书
3分钟演讲稿
2014/04/30 职场文书
党校毕业心得体会
2014/09/13 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
白酒代理协议书范本
2014/10/26 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang