vue中的计算属性和侦听属性的区别

这篇具有很好参考价值的文章主要介绍了vue中的计算属性和侦听属性的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

计算属性: computed 

computed是用来计算出来一个值 ,这个值调用的时候不需要加括号,会根据依赖进行缓存,依赖不变,computed的值不会重新计算

侦听属性: watch (两个属性)

1immediate:表示是否要在第一次渲染的时候执行这个函数

2deep:如果我们监听一个对象,那么我们是否要看这个对象里面属性的变化

不同点:

1.依赖方式:计算属性依赖于定义时所依赖的数据,当依赖的数据变化时,计算属性会自动更新; 而watch则需要在数据变化时手动调用。

2.用途:计算属性更适合做筛选操作,例如根据用户的年龄范围筛选商品列表;而watch更适合做执行异步或开销较大的操作,例如发送请求获取数据。

3.执行顺序:当计算属性和watch同时监听一个数据时,watch的回调函数会先执行,计算属性的回调函数会在所有watch的回调函数执行完毕后执行。

原创作者: 吴小糖

创作时间:2024.2.21文章来源地址https://www.toymoban.com/news/detail-836649.html

到了这里,关于vue中的计算属性和侦听属性的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue--》计算属性与监视(侦听)属性的使用

    目录 计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项 深度监视/

    2024年02月02日
    浏览(29)
  • Vue学习-计算属性和侦听器

    1、计算属性的定义和原理 1、定义:要用的属性不存在,要通过已有属性计算得来。 2、原理:底层借助了Objcet.defineproperty方法提供的getter和setter。 3、get函数什么时候执行?   (1) 初次读取时会执行一次。   (2)当依赖的数据发生改变时会被再次调用。 4、优势:与

    2023年04月18日
    浏览(35)
  • VUE教程-基础-计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年02月17日
    浏览(39)
  • 二、基础篇 vue计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年01月18日
    浏览(40)
  • vue04---计算属性/监听(侦听)属性/Vue生命周期/组件介绍和使用/组件间通信/ref属性

    # 1 计算属性是基于它们的依赖变量进行缓存的 # 2 计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算) # 3 计算属性就像Python中的property,可以把方法/函数伪装成属性 # 4 计算属性,必须有返回值 基本使用 重写过滤案

    2024年02月08日
    浏览(53)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(35)
  • 浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化

    计算属性 computed 和侦听器 watch 都是 Vue.js 框架中用来响应式更新视图的重要概念。因此无论是在哪个版本,它们都是不可缺少的概念, 这篇文章就不过多详细介绍计算属性和侦听器的概念和理论了 ,接下来主要谈谈 Vue2 和 Vue3 中计算属性和侦听器的语法变化和异同。 计算属

    2023年04月26日
    浏览(36)
  • Vue.js 中的过滤器和计算属性

    Vue.js 是一款流行的 JavaScript 框架,它提供了一种简单而灵活的方式来构建交互式 Web 应用程序。在 Vue.js 中,过滤器和计算属性是两个常用的概念。它们可以帮助开发者更方便地处理数据,提高代码的可读性和可维护性。但是这两个概念有什么区别呢?本文将会详细介绍 Vue

    2024年02月08日
    浏览(39)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(78)
  • Vue-watch 侦听对象属性

    Vue 的 watch 侦听器格式有两种: 方法格式 和 对象格式 的侦听器。 方法格式的侦听器只能 监听简单数据类型 ,如: Number、String 、… 无法监听对象属性的变化,也不能在进入页面时,自动触发; 对象格式的侦听器可以监听 对象属性 的变化。在一定条件下,载入页面时,也

    2024年02月02日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包