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

这篇具有很好参考价值的文章主要介绍了前端经典面试题 | Computed 和 Watch 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🖥️ 前端经典面试题专栏:前端经典面试题 | Computed 和 Watch 的区别
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、回答点

二、深入回答

Computed:

Watch:

应用场景:


一、回答点

computed计算属性: 依赖其他的值,有缓存, 当它依赖的属性值发生改变,在下次获取computed的值时,才会重新计算computed值,而watch监听器,更多的是起到监听的作用,它没有缓存,每当监听的数据发生了都会执行回调进行后续的操作.文章来源地址https://www.toymoban.com/news/detail-832174.html

二、深入回答

Computed:

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

Watch:

  • 不支持缓存,当数据发生变化时,他就会触发,之后进行对应的操作
  • 它支持异步监听
  • 监听的函数会接收两个参数,第一个参数是新值,第二个参数是 旧值
  • 当一个属性发生变化时,就会执行对应的操作
  • 监听数据必须在data中声明 或这 从父组件传递过来的props中的数据 当发生变化时,会触发对应的操作,函数有两个参数:
    • immediate:组件加载会直接触发回调函数
    • deep:深度监听,发现数据内部的变化,在复杂数据类型中使用.这里要注意的是 deep无法监听到数组和对象内部的变化.

应用场景:

  • 当需要进行计算并依赖其他数据的时候,就使用 计算属性, 因为可以利用 计算属性的缓存特性,避免每次获取值时候都要重新计算.而当它需要执行异步操作时 使用watch.

到了这里,关于前端经典面试题 | Computed 和 Watch 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中,ref()、reactive()、computed()、watch() 和 watchEffect()的区别

    ref()、reactive()、computed()、watch() 和 watchEffect() 是 Vue 3 中常用的响应式处理函数,它们的主要区别如下: ref():ref() 函数用于将一个普通的 JavaScript 值转化为响应式对象。它返回一个具有 value 属性的对象,我们可以通过访问 value 属性来获取或修改值。当我们对 ref() 返回的对象

    2024年02月22日
    浏览(40)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(30)
  • 前端学习---vue2--选项/数据--data-computed-watch-methods-props

    写在前面: vue提供了很多数据相关的。 简单的说就是进行双向绑定的区域。 vue实例的数据对象,会把data的数据转换成getter和setter,从而可以进行响应式的变化, vue实例创建后,可以通过vm.$data.x获取data里面的x,但同时vue实例也代理了其中的对象,所以我们一般使用简单的

    2024年02月14日
    浏览(33)
  • 【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:vue2从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2023年04月15日
    浏览(33)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(45)
  • computed和watch

    computed: 写法: watch,第一个参数是要监听的对象,第二个参数是监听的方法,第三个参数是监听的配置 两个小“坑”: 1.监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。 2.监视reactive定义的响应式数据中某个属性时: deep配置有效。 数据

    2023年04月25日
    浏览(23)
  • watch computed 和 method

    在Vue中, watch 、 computed 和 methods 是三种不同的属性,用于处理不同的场景和需求。 watch : watch 用于监听数据的变化并执行相应的操作。当被监听的数据发生变化时,会触发相应的回调函数。 watch 适用于需要在数据变化时执行异步或复杂的操作,或者需要监听多个数据的变

    2024年02月11日
    浏览(39)
  • 学习Vue:computed VS watch

    在 Vue.js 中,Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中,您可能会遇到更复杂的数据处理需求。为此,Vue 提供了计算属性和侦听器这两个强大的工具,让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性,它允许您定义一

    2024年02月12日
    浏览(57)
  • watch避坑,使用computed进行处理数据

    业务场景:在vue中监听el-input 中的字数有没有超过60,如果超过60字时将60后面的字变为 “ ” 符号,以此实现预览苹果手机推送摘要场景。 错误:开始的逻辑是使用 watch 监听,检查length超过60直接 加上符号,如下: 解决:使用 computed 计算属性进行监听赋值,具体如下: 在

    2024年02月15日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包