面试题四:请解释一下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.mzph.cn/news/81710.shtml

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

相关文章

MATLAB中filloutliers函数用法

目录 语法 说明 示例 在向量中对离群值进行插值 使用均值检测和最邻近值填充方法 使用移窗检测法 填充矩阵行中的离群值 指定离群值位置 返回离群值阈值 filloutliers函数功能是检测并替换数据中的离群值。 语法 B filloutliers(A,fillmethod) B filloutliers(A,f…

聚观早报 | iPhone 15系列正式发布;月饼专利申请超10000项

【聚观365】9月14日消息 iPhone 15系列正式发布 月饼专利申请超10000项 “五个女博士”自建研究院 2023中国民营企业研发十强公布 华为和小米达成全球专利交叉许可协议 iPhone 15系列正式发布 2023年苹果秋季新品发布会如期而至。发布会上&#xff0c;苹果发布了iPhone 1…

STM32 CAN使用记录:FDCAN基础通讯

文章目录 目的基础说明关键配置与代码轮询方式中断方式收发测试 示例链接总结 目的 CAN是非常常用的一种数据总线&#xff0c;被广泛用在各种车辆系统中。这篇文章将对STM32中FDCAN的使用做个示例。 CAN的一些基础介绍与使用可以参考下面文章&#xff1a; 《CAN基础概念》htt…

基于Xml方式Bean的配置-Bean的延时加载

SpringBean的配置详解 Bean的延时加载 当lazy-init设置为true时为延时加载&#xff0c;也就是当Spring容器创建的时候&#xff0c;不会立即创建Bean实例&#xff0c;等待用到时再创建Bean实例并储存到单例池中&#xff0c;后续使用该Bean时直接从单例池中获取即可&#xff0c;…

手把手教你搭建农产品商城小程序:详细步骤解析

随着移动互联网的普及&#xff0c;越来越多的人开始关注如何在手机上进行购物&#xff0c;尤其是对于农产品这类日常生活所需品。本文将手把手教你搭建一个农产品商城小程序&#xff0c;让你轻松实现在手机上购买农产品的愿望。 一、登录乔拓云网后台 首先&#xff0c;我们需要…

83 # 静态服务中间件 koa-static 的使用以及实现

静态服务中间件&#xff1a;koa-static 中间件可以决定是否向下执行&#xff0c;如果自己可以处理&#xff0c;那么直接处理完毕结束&#xff0c;如果自己处理不了&#xff0c;next 方法会继续向下执行 新建 public 文件夹&#xff0c;里面添加 index.html、style.css 文件 …

使用IDEA开发Servlet

一、新建工程 二、填写新工程的基本信息 javaee8的项目可以运行在tomcat9 三、配置tomcat 1、编辑server信息 “On frame deactivation”的意思是idea窗口发生切换时。 2、编辑部署信息 war exploded方式&#xff0c;这种方式是以文件夹方式部署的&#xff0c;支持热加载。 …

400电话客服中心电话:为您提供全方位的客户服务

在现代商业环境中&#xff0c;提供优质的客户服务是企业成功的关键之一。为了满足客户的需求和解决问题&#xff0c;许多企业选择设立400电话客服中心。400电话是一种特殊的电话号码&#xff0c;可以通过固定电话和移动电话拨打&#xff0c;客户可以通过这个号码与企业进行沟通…

2023年最热门的编程语言:前进的趋势和机会

2023年最热门的编程语言&#xff1a;前进的趋势和机会 2023年最热门的编程语言&#xff1a;前进的趋势和机会摘要引言1. 编程语言的热门趋势1.1 新兴编程语言的崛起1.2 编程语言的可持续性发展1.3 跨平台编程语言的兴起1.4 人工智能和机器学习编程语言的需求 2. 编程语言职业机…

HDMI协议Ver2.0a(学习笔记)

1 简介 本规范由HDMI论坛制定 2.目的和范围 本文件构成了高清多媒体接口2.0版规范&#xff08;HDMI规范2.0版&#xff09;。本规范通过引用纳入了HDMI规范1.4b版&#xff0c;并定义了附加和改进的功能。对Source、Sink、中继器和电缆的合规性所需的机械、电气、行为和协议要…

QT:使用普通按钮、网格布局管理器、标签、行编辑器、水平布局管理器、垂直布局管理器做一个小项目

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> //普通按钮 #include <QGridLayout> //网格布局管理器 #include <QLabel> //标签 #include <QLineEdit> //行编辑器 #include <QHBoxLayo…

Android 系统中适配OAID获取

一、OAID概念 OAID&#xff08;Open Anonymous Identification&#xff09;是一种匿名身份识别标识符&#xff0c; 用于在移动设备上进行广告追踪和个性化广告投放。它是由中国移动通信集 团、中国电信集团和中国联通集团共同推出的一项行业标准 OAID值为一个64位的数字 二、…

Linux中安装MySQL_图解_2023新

1.卸载 为了避免不必要的错误发生,先将原有的文件包进行查询并卸载 // 查询 rpm -qa | grep mysql rpm -qa | grep mari// 卸载 rpm -e 文件名 --nodeps2.将安装包上传到指定文件夹中 这里采用的是Xftp 3.将安装包进行解压 tar -zxvf 文件名 -C 解压路径4.获取解压的全路…

生成代理:人类行为的交互模拟(Generative Agents: Interactive Simulacra of Human Behavior)

Generative Agents: Interactive Simulacra of Human Behavior 简介 论文是斯坦福大学和deepmind团队联合发表&#xff0c;主要介绍了一种利用LLM模型指导生成Agents代理的方法&#xff0c;让代理具有记忆、反思和规划的能力。 结合LLM模型创造了一个系统架构&#xff0c;架构…

Qt扩展-KDDockWidgets 简介及配置

Qt扩展-KDDockWidgets 简介及配置] 一、概述二、编译 KDDockWidgets 库1. Cmake Gui 中选择源文件和编译后的路径2. 点击Config&#xff0c;配置好编译器3. 点击Generate4. 在存放编译的文件夹输入如下命令开始编译 三、qmake 配置 一、概述 kdockwidgets是一个由KDAB组织编写…

GPIO子系统编写LED灯的驱动、linux内核定时器

一、GPIO子系统 1.概念&#xff1a; 一个芯片厂商生产出芯片后会给linux提供一个当前芯片中gpio外设的驱动&#xff0c;我们当前只需要调用对应的厂商驱动即可完成硬件的控制。而linux内核源码中的gpio厂商驱动有很多&#xff0c;这里linux内核对厂商驱动做了一些封装&#x…

无涯教程-JavaScript - MUNIT函数

描述 MUNIT函数返回指定尺寸的单位矩阵。 语法 MUNIT (dimension)争论 Argument描述Required/OptionalDimension Dimension是一个整数,指定要返回的单位矩阵的尺寸。 尺寸必须大于零。 Required Notes MUNIT返回一个数组。因此,应将其作为数组公式输入 MUNIT (N)$\begin{m…

在docker中安装MQTT教程

网上的好多关于在docker中安装MQTT教程都是错误的不完整的。这篇博客是完整的&#xff0c;实践过的&#xff0c;踩过了很多的坑得来的&#xff0c;欢迎大家享用&#xff01; 1、首先在docker中拉取镜像 docker pull eclipse-mosquitto2、创建配置文件目录 mkdir -p /docker/…

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

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

公司固定资产管理定制方案怎么写

有效的固定资产管理对企业的成功至关重要。然而&#xff0c;如何制定一套既符合公司需求又具有前瞻性的固定资产管理定制方案&#xff0c;是每个企业都需要面对的挑战。本文将从创新、流畅和清晰的角度出发&#xff0c;探讨如何撰写一份成功的固定资产管理定制方案。 创新  …