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 onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
js实现进度条的方法
Feb 13 Javascript
纯js实现手风琴效果
Apr 17 Javascript
js数组去重的hash方法
Dec 22 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
ES6箭头函数和扩展实例分析
May 23 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 的 __FILE__ 常量
2007/01/15 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python代码过长的换行方法
2018/07/19 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
产品发布会策划方案
2014/05/12 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
win10更新失败无限重启解决方法
2022/04/19 数码科技