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

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

一、回答点

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

二、深入回答

Computed:

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

Watch:

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

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

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

应用场景:

  • 当需要进行计算并依赖其他数据的时候,就使用 计算属性, 因为可以利用 计算属性的缓存特性,避免每次获取值时候都要重新计算.而当它需要执行异步操作时 使用watch.
相关文章
|
6天前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
3月前
|
前端开发 UED 开发者
颠覆你的前端知识:防抖与节流的区别及实战解析!
【8月更文挑战第23天】在Web前端开发中,处理用户界面交互产生的事件可能会影响性能。为此,我们有两种优化方法:防抖(debounce)和节流(throttle)。防抖确保函数仅在事件停止触发一段时间后执行一次,适用于如搜索自动补全场景。而节流则确保函数按固定时间间隔执行,不管用户操作频率如何。本篇技术博客将深入解析两者差异并提供示例代码,帮助开发者更好地理解和应用这些技巧以提升应用性能和用户体验。
79 0
|
20天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
54 1
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
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月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
52 2
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
39 0
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
50 0