面试题四:请解释一下watch,computed和filter之间的区别

watch与computed、filter:

watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法

computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法.computed有详细的介绍,移步computed的使用

filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选,是methods的一种,如果简单的修饰数据的话用过滤器,如果需要处理大量的复杂逻辑还是用methods比较好。filter也有详细的介绍,移步请你谈一谈Vue中的filter功能的实现。

watch与computed的区别:

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性。

2.watch不会缓存数据,每次打开页面都会重新加载一次。

但是computed如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中
得到数据(所以computed的性能比watch更好一些)

filter 与 computed 的区别

1. 触发时机不同

computed 属性背后的处理逻辑比较复杂,依赖 Vue 的数据更新通知机制,在属性所依赖的其他数据项发生变化时才会重新触发计算。优点是计算频率相对较低;缺点是依赖于组件,难以抽取成独立逻辑,也就是复用性低。

filter 则显的简单很多,只在显式调用时触发,一般应用在模板渲染上。优点是容易在组件外抽象;缺点是每次模板渲染时都需要重新执行计算。可以通过示例 感受调用时机的区别:

2. 应用范围不同

computed 很广泛,可以应用在其他computed、methods、生命周期函数、模板;filter 一般只应用于模板渲染上,如果要在其他位置复用,需要使用 this._f 函数:

温馨提示:用this.$options也可以

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 属性具有缓存能力,在组件内普适性更强,因此适用于复杂的数据转换、统计等场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/111808.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安防视频/视频汇聚平台EasyCVR使用onvif探测添加设备通道详细步骤来啦!

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

西南最大直播产业园 天府蜂巢成都直播产业基地正式落户天府新区

新蓝图已然绘就&#xff0c;新征程击鼓催征。近年来&#xff0c;四川电子商务行业的发展势头日益强劲&#xff0c;为助力成都直播产业的多元化发展&#xff0c;由树莓集团和德商产投合作共建开展的中国西部最大电娱直播产业基地——成都天府蜂巢直播产业基地落户天府新区。该基…

线程的生命周期

CV大师--好文章的搬运工 知乎有质量的文章是真多 CSDN鱼龙混杂 大部分是鱼 原文章:线程的生命周期及其六种状态的转换 - 知乎 (zhihu.com) --------------------------------------------------------------------------------------------------- 线程的生命周期 线程的…

JWT安全及案例实战

文章目录 JWT 安全1. Cookie2. Session3. Token4. JWT4.1 JWT概述4.1.1 JWT头4.1.2 有效载荷4.1.3 签名哈希4.1.4 通信流程 4.2 JWT 漏洞描述4.3 JWT 漏洞原理4.4 JWT 安全防御 5. WebGoat 靶场实验5.1 第四关5.2 第五关5.3 第七关 越权与逻辑漏洞 Web漏洞点只有一个入口&#…

Redis五大基本数据类型

1、字符串类型 字符串类型相当于 java 中的 String 类型。Redis 中的 String 类型以二进制方式存储&#xff0c;不会做任何的编码转换&#xff0c;因此不仅仅可以存储文本数据、整数、普通的字符串、JSON、xml文件&#xff0c;还可以存储图片、视频、音频。String 存储的种类虽…

【踩坑篇】代码中使用 Long 作为 Map的Key存在的问题

本周的工作结束&#xff0c;详述一些在项目代码中实际遇到的一些坑。 代码中遇到这样一个场景&#xff1a; 有个业务接口&#xff0c;接口返回的值是一个JSON格式的字符串&#xff0c;通过JSON解析的方式&#xff0c;解析为格式为&#xff1a; Map<Long, Map<String, O…

【物联网】常见电子元器件(电阻、电容、电感、二极管、三极管)综合,详细分析原理及其应用

电子元器件是现代电子技术的基础&#xff0c;它们在各个领域中发挥着重要作用。从三极管到电容器、电阻器&#xff0c;这些常用元器件承担着放大、开关、滤波等关键任务。它们的特性和组合方式决定了电路的性能和功能。本文将介绍常用电子元器件的工作原理和应用场景&#xff0…

Lua学习笔记:在Visual Studio中调试Lua源码和打断点

前言 本篇在讲什么 调试Lua源码 本篇需要什么 对Lua语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级标题 &#x1f448; &…

git中无法使用方向键的问题

windows下使用git命令行执行react脚本安装&#xff0c;发现无法使用上下键来去选中选项。最后只能换成cmd命令执行&#xff0c;发现可以上下移动以选中需要的选项。 bash命令行&#xff1a;移动光标无法移动选项 cmd命令行

自然语言处理(一):基于统计的方法表示单词

文章目录 1. 共现矩阵2. 点互信息3. 降维&#xff08;奇异值分解&#xff09; 1. 共现矩阵 将一句话的上下文大小窗口设置为1&#xff0c;用向量来表示单词频数&#xff0c;如&#xff1a; 将每个单词的频数向量求出&#xff0c;得到如下表格&#xff0c;即共现矩阵&#x…

2023!6招玩转 Appium 自动化测试

Appium是个什么鬼 Appium是一个移动端的自动化框架&#xff0c;可用于测试原生应用&#xff0c;移动网页应用和混合型应用&#xff0c;且是跨平台的。可用于IOS和Android以及firefox的操作系统。原生的应用是指用android或ios的sdk编写的应用&#xff0c;移动网页应用是指网页…

DevEco Studio中如何设置HarmonyOS/OpenHarmony应用开发

DevEco Studio内置有帮助中心&#xff0c;初学HarmonyOS 及OpenHarmony应用、元服务的开发者&#xff0c;通过内置的帮助中去系统的学习相关内容&#xff0c;是边练边学&#xff0c;快速上手的最佳方式。 一、帮助 二、快速开始 三、HarmonyOS应用、元服务开发相关 四、OpenHa…