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

news2024/11/26 18:23:01

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.coloradmin.cn/o/1019998.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023 Google 开发者大会 – 惊喜来袭

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 2023 Google 开发者大会 – 惊喜来袭 2023 Google 开发者大会面向开发者和科技爱好者展示最新产品和平台的年度盛会。今年Google大会为大家提供了丰富的学习资源&…

transforms数据预处理【图像增强】 ->(个人学习记录笔记)

文章目录 1. 安装2. transforms——Crop 裁剪2.1 transforms.CenterCrop2.2 transforms.RandomCrop2.3 transforms.RandomResizedCrop2.4 transforms.FiveCrop2.5 transforms.TenCrop 3. transforms——Flip 翻转3.1 transforms.RandomHorizontalFlip3.2 transforms.RandomVert…

Bash脚本学习:AWK, SED

1. AWK AWK 是一种编程语言&#xff0c;设计用于处理文件或数据流中基于文本的数据&#xff0c;或者使用 shell 管道。 可以将 awk 与 shell 脚本结合使用或直接在 shell 提示符下使用。 以上展示使用AWK分别打印第一个位置变量和第二个位置变量。 建立一个文档 csvtest.cs…

【前端知识】Three 学习日志(二)—— 加强三维空间认识

Three 学习日志&#xff08;二&#xff09;—— 加强三维空间认识 一、设置辅助观察坐标系 // 创建3D场景对象Scene const scene new THREE.Scene(); // AxesHelper&#xff1a;辅助观察的坐标系 const axesHelper new THREE.AxesHelper(150); scene.add(axesHelper);二、设…

布局设计和实现:计算器UI【TableLayout、GridLayout】

一、使用TableLayout实现计算器UI 1.新建一个空白项目布局 根据自己的需求输入其他信息 填写完成后&#xff0c;点击Finish即可 2. 设计UI界面 在res/layout文件夹中的XML文件中创建UI界面。在这个XML文件中&#xff0c;您可以使用TableLayout来设计计算器界面。 2.1 创建l…

【PyTorch攻略(1/7)】 张量基本语法

一、说明 Tensor 是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。在 PyTorch 中&#xff0c;我们使用张量对模型的输入和输出以及模型的参数进行编码。 张量类似于 NumPy 和 ndarray&#xff0c;除了张量可以在 GPU 或其他硬件加速器上运行。事实上&#xff0c;张量和…

Navicat 连接数据库出现1251

原因&#xff1a; MySQL8.0以上版本的加密方式和MySQL5.0的不一样&#xff0c;所以Navicat连接MySQL会报错。 1251 - Client does not support authentication protocol requested by server; consider upgrading MysQl. cdient– 修改远程连接权限 % 可换为自己的电脑ip GRAN…

Spring Boot实现web.xml功能

Spring Boot实现web.xml功能 1. 基于注解实现1.1 组件注册1.2 WebInitParam注解 2. 基于编码实现2.1 Servlet & Filter2.2 Listener 3. 总结 在Spring Boot中&#xff0c;不再需要使用传统的 web.xml 文件来配置web应用的功能&#xff0c;Spring Boot支持通过注解和基于代码…

132.【MySQL_进阶】

MySQL_进阶 (一)、存储引擎1.MySQL体系结构(1).连接层(2).服务层(3).引擎层(4).存储层 2.存储引擎简介(1).查看某张表的数据引擎(2).展示此版本支持的所有存储引擎(3).创建表my_myisam,并指定MyIASM存储引擎(4).存储引擎示列 3.存储引擎 _ Innodb(1).Innodb 介绍(2).Innodb 特点…

展会预告 | 图扑邀您共聚 IOTE 国际物联网展·深圳站

参展时间&#xff1a;9 月 20 日- 22 日 图扑展位&#xff1a;9 号馆 9B 35-1 参展地址&#xff1a;深圳国际会展中心&#xff08;宝安新馆&#xff09; IOTE 2023 第二十届国际物联网展深圳站&#xff0c;将于 9 月 20 日- 22 日在深圳国际会展中心&#xff08;宝安&#xf…

C#,数值计算——Hashtable的计算方法与源程序

1 文本格式 using System; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer { public abstract class Hashtable<K> { private int nhash { get; set; } private int nmax { get; set; } pr…

基于反向推理的序列预测模型

序列预测是机器学习中的一个关键问题,涉及到频繁序列挖掘、时间序列预测、自然语言处理等多个领域。在预测模型中,一个关键的挑战就是如何有效地利用历史信息进行预测。目前,大多数预测模型都是基于历史信息进行前向推理,这种方法在输入序列不完全或未知的情况下,其预测效…

性能测试-性能工程全景图、实施方案、建设目标(20)

性能工程是一个关注系统性能层面的体系,包含测试环境的性能测试、生产环境的性能测试、性能调优、容量规划等多个方面 性能工程主要包括如下3个部分 ❑建设性能测试理论体系和流程规范、链路分析基础知识体系和流程规范、性能调优基础理论体系和流程规范。 ❑搭建高效协同的工…

Typora远程代码执行漏洞CVE-2023-2317

0x00 前言 漏洞详情 版本16.7以前的Typora中的updater/update.html存在基于DOM的XSS&#xff0c;可以通过加载定制的markdown文件实现任意javascript代码执行。 原理分析 漏洞触发点位于Typora的updater.html文件&#xff0c;通过特定协议typora://即可访问&#xff0c;同时…

PDF怎样加密?希望这些方法可以帮助大家

PDF怎样加密&#xff1f;我们平时会使用到非常多的pdf文件&#xff0c;相信大家也接触过这样一种pdf文件&#xff0c;当我们想要打开这个pdf文件的时候被告知需要输入一个密码后才能真正打开&#xff0c;都则这个文件你是无法打开的&#xff0c;这是因为这个pdf文件已经进行了加…

自动化和数字化在 ERP 系统中意味着什么?

毋庸置疑&#xff0c;ERP系统的作用是让工作更轻松。它可以集成流程&#xff0c;提供关键分析&#xff0c;确保你的企业高效运营。这些信息可以提高你的运营效率&#xff0c;并将有限的人力资本重新部署到更有效、更重要的需求上。事实上&#xff0c;自动化和数字化是ERP系统最…

思维导图怎么画好看又简单?看看这个方法

思维导图怎么画好看又简单&#xff1f;思维导图是一种非常有用的工具&#xff0c;可以帮助我们组织和展示思维。如果你想要画出既好看又简单的思维导图&#xff0c;那么我们可以使用一些思维导图制作工具。下面就给大家介绍一款个人觉得很好用的思维导图制作工具。 【迅捷画图】…

【八大经典排序算法】堆排序

【八大经典排序算法】堆排序 一、概述二、思路解读三、代码实现&#xff08;大堆为例&#xff09; 一、概述 堆排序是J.W.J. Williams于1964年提出的。他提出了一种利用堆的数据结构进行排序的算法&#xff0c;并将其称为堆排序。堆排序是基于选择排序的一种改进&#xff0c;通…

嵌入式应用范围为什么这么广?

嵌入式应用范围为什么这么广&#xff1f; 嵌入式技术的应用范围远比我们想象的要广泛。从传统的角度看&#xff0c;空调、电饭煲、电风扇、冰箱、遥控器、路由器、洗衣机、智能手机、投影仪、音响等等&#xff0c;几乎每天都在使用的产品都离不开嵌入式技术。 而随着互联网的…

【力扣周赛】第 363 场周赛(完全平方数和质因数分解)

文章目录 竞赛链接Q1&#xff1a;100031. 计算 K 置位下标对应元素的和竞赛时代码写法2——手写二进制中1的数量 Q2&#xff1a;100040. 让所有学生保持开心的分组方法数&#xff08;排序后枚举分界&#xff09;竞赛时代码 Q3&#xff1a;100033. 最大合金数&#xff08;二分答…