前端经典面试题 | Computed 和 Watch 的区别

简介: 前端经典面试题 | Computed 和 Watch 的区别

一、回答点

computed计算属性: 依赖其他的值,有缓存, 当它依赖的属性值发生改变,在下次获取computed的值时,才会重新计算computed值,而watch监听器,更多的是起到监听的作用,它没有缓存,每当监听的数据发生了都会执行回调进行后续的操作.

二、深入回答

Computed:

  • 支持缓存,当依赖的数据发生变化后,才会重新计算
  • 不支持一步操作,当它里面有 异步操作时,无法监听数据的变化
  • 计算属性的值 默认会缓存,它是基于响应式依赖进行缓存的,就是 基于data声明过 或者 从父组件传递过来的props中的数据进行金酸
  • 如果一个属性是由其他属性计算而来,那么一般会使用计算属性
  • 如果 计算属性的属性值是函数,那么默认会使用get 方法,函数的返回值就是属性的属性值,在计算属性中,有get和set方法,当数据发生变化时,会调用set方法

Watch:

  • 不支持缓存,当数据发生变化时,他就会触发,之后进行对应的操作
  • 它支持异步监听
  • 监听的函数会接收两个参数,第一个参数是新值,第二个参数是 旧值
  • 当一个属性发生变化时,就会执行对应的操作
  • 监听数据必须在data中声明 或这 从父组件传递过来的props中的数据 当发生变化时,会触发对应的操作,函数有两个参数:

         ●   immediate:组件加载会直接触发回调函数

         ●   deep:深度监听,发现数据内部的变化,在复杂数据类型中使用.这里要注意的是 deep无法监听到数组和对象内部的变化.

应用场景:

  • 当需要进行计算并依赖其他数据的时候,就使用 计算属性, 因为可以利用 计算属性的缓存特性,避免每次获取值时候都要重新计算.而当它需要执行异步操作时 使用watch.
相关文章
|
6天前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
2月前
|
Android开发 Kotlin
Android经典面试题之Kotlin的==和===有什么区别?
本文介绍了 Kotlin 中 `==` 和 `===` 操作符的区别:`==` 用于比较值是否相等,而 `===` 用于检查对象身份。对于基本类型,两者行为相似;对于对象引用,`==` 比较值相等性,`===` 检查引用是否指向同一实例。此外,还列举了其他常用比较操作符及其应用场景。
187 93
|
3月前
|
前端开发 UED 开发者
颠覆你的前端知识:防抖与节流的区别及实战解析!
【8月更文挑战第23天】在Web前端开发中,处理用户界面交互产生的事件可能会影响性能。为此,我们有两种优化方法:防抖(debounce)和节流(throttle)。防抖确保函数仅在事件停止触发一段时间后执行一次,适用于如搜索自动补全场景。而节流则确保函数按固定时间间隔执行,不管用户操作频率如何。本篇技术博客将深入解析两者差异并提供示例代码,帮助开发者更好地理解和应用这些技巧以提升应用性能和用户体验。
79 0
|
15天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
20天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
54 1
|
1月前
|
编译器
经典面试题:变量的声明和定义有什么区别
在编程领域,变量的“声明”与“定义”是经典面试题之一。声明告诉编译器一个变量的存在,但不分配内存,通常包含变量类型和名称;而定义则为变量分配内存空间,一个变量必须至少被定义一次。简而言之,声明是告知变量形式,定义则是实际创建变量并准备使用。
|
1月前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
112 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
1月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
26 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
92 0
|
1月前
|
前端开发 小程序 JavaScript
面试官:px、em、rem、vw、rpx 之间有什么区别?
面试官:px、em、rem、vw、rpx 之间有什么区别?
38 0