【watch、computed和methods的区别】

最新推荐文章于 2024-08-13 09:40:14 发布
最新推荐文章于 2024-08-13 09:40:14 发布
阅读量59 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GR199717/article/details/130184715
版权
computed用于计算属性，依赖数据变化时自动更新，有缓存机制；watch是对值的监听，变化时执行回调，可设置立即触发；methods仅包含可调用的函数，不处理数据。computed适合复杂但不频繁计算的数据，watch适合数据变化时需执行特定操作的情况。
摘要由CSDN通过智能技术生成

功能不同

  1. computed是计算属性，会根据依赖数据的变化动态的显示新的计算结果
  2. watch是监听一个值的变化，执行相应的回调，在方法中传入新值和老值
  3. methods是挂载在对象上的函数，不处理数据逻辑，只提供可手动调用的函数

是否调用缓存不同

  1. computed的计算结果会被缓存，如果依赖的属性值没有变化，会从缓存中取，只有当依赖的属性值发生改变时才会重新调用对应的getter计算
  2. watch在每次监听的值发生变化时，都会执行回调

默认监听不同

  1. computed默认在第一次加载时就开始监听
  2. watch默认第一次加载不做监听，如果想要第一次加载就做监听，主要添加immediate的属性为ture

是否调用return

  1. computed中的函数必须要用return返回
  2. watch中的函数不是必须使用return

使用场景不同

  1. computed：由于vue的{{}}中也可以写一下简单的js计算，但如果在页面中使用太多的逻辑表达去处理数据时，会影响页面的可维护性，适用于比较费时但不需要重复计算的环境，如果一个数据依赖于其他的属性，可以把这个数据设计成computed
  2. watch：在某个数据变化时需要执行一些操作，使用watch来观察变化
忆承
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
computed、methods、watch 简述 和 区别
w17624003437的博客
07-14 702
在computed中可以定义一些属性：计算属性。计算属性的本质其实就是一个方法，只不过在使用的时候可以直接当做属性来使用。具体有以下特点： 1. 计算属性在使用时不需要加(),直接写名称即可 2.如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值 3.计算属性在第一次使用时的结果会缓存起来，直到属性中依赖的data数据发生变化计算属性的结果才会重新求值 可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次同时还可以直接在监听的
watch、computed、methods的区别
WS_0201的博客
02-11 1575
1.计算属性Computed 模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。 <!-- 复杂运算 --> <div>{{message.split('').reverse().join('')}}</div> <!-- 计算属性代替复杂运算 --> <div>{{reverseMessage}}</div> computed: {
computed、methods和watch的区别
weixin_46100406的博客
10-29 2516
一、computed 和 methods computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。 不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲
Vue中watch、computed和methods的区别
zhoulib__的博客
10-22 3318
watch和computed是对数据的监听 new Vue({ el:'#app', template:` <div> 1.{{msg}}|{{data1}}|{{data2}} <br/> ...
watch，methods和computed的区别
thebeats的博客
06-20 657
1. watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的相关数据自动发生变化，也就是自动调用相关的函数去实现数据的变动。首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的。
computed、watch、methods的区别
Mqyyy的博客
03-31 463
4. 在 computed 属性对象中定义计算属性的方法，和取 data 对象里的数据属性一样以属性访问的形式调用，即在页面中使用 {{ 方法名 }} 来显示计算的结果，computed 有返回值，方法的返回值作为属性值；1. computed 所监控的数据是不在 data 中进行声明的，它是基于data 或 props 中的数据通过计算得到的一个新的值，而watch监控的数据来源是data、props 和 computed 中的。3. computed 是带缓存的，而 methods 是没有缓存的。
computed和watch和methods区别
Demolist的博客
06-26 382
我们在使用vue的时候，通常会出现computed和watch的区分问题computed：计算属性①computed是有缓存的,有缓存则下次调用相同方法时不需要加载，并且只会在本身的data或父传子来的props才会调用里面的方法。②computed不支持异步,所以不能在当中使用定时器，得在watch中使用。③使用computed中的方法时，必须return值。watch:事件监听①watch是没有缓存的，当数据发生改变后，就会调用当前定义的方法②watch是支持异步的，每次执行时都会调用回调函数。③wat
Vue中的watch和computed和methods有什么区别？
weixin_45276056的博客
12-09 3683
一、watch、computed、methods的区别： watch: 一个对象，键是需要观察的表达式，值是对应回调函数。 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。 可以看作是computed和methods的结合体。 computed: 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。 主要当属性来使用。 methods: 方法表示一个具体的操作，主要是书写业务逻辑。 二、watch的作用： (1)watch属性可以来
Watch、computed、methods区别
m0_61093181的博客
04-28 107
在Vue开发中，我们经常会使用到watchcomputed和methods这三种方式来处理对数据的操作。这三者虽然都可以监听数据的变化并实现相应的逻辑，但它们之间还是存在一些区别的。
watch，computed和methods的关系
wsx1212123的博客
08-17 119
watch，computed和methods的关系 1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和com...
Vue中的methods、watch、computed的区别
10-17
主要介绍了Vue中的methods、watch、computed的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中computed、methods与watch的区别总结
10-17
主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
computed和watch使用
08-19
在Vue.js框架中，`computed`和`watch`是两个非常重要的概念，它们主要用于处理数据的响应式更新和监听。这两个特性使得Vue能够高效地管理组件的状态并及时更新视图。 `computed`属性用于计算基于其他数据的值，并且...
Vue的watch和computed方法的使用及区别介绍
10-18
在Vue中，`watch` 和 `computed` 都是用来响应数据变化的机制，但它们之间存在显著的区别。本文将深入探讨这两者的用法和差异。 首先，让我们来看看 `watch`。`watch` 是Vue中用于监听数据变化的工具，它可以执行...
详解Vue中的watch和computed
01-22
对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过源码来分析这三者的背后实现原理，...
vue的diff算法的【双端比较】策略
yiguoxiaohai的博客
08-08 358
vue的diff算法的双端比较策略
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
weixin_44784401的博客
08-09 893
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
Vue 中 app.config 相关配置项介绍与案例
最新发布
前端基地
08-13 651
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
Vue设置滚动条自动保持到最底端
Lipn_的博客
08-09 602
实现滚动条始终保持在最底端
watch和computed和methods区别
04-01
watch：用于监听某个值的变化，当这个值变化时，会执行watch中定义的函数。适用于一些需要在特定值变化时执行异步操作的情况。 computed：用于计算某个值，当该值依赖的数据发生变化时，会重新计算该值。适用于一些需要根据依赖数据计算出新值的情况。 methods：用于定义某个方法，当需要在模板中调用该方法时，会执行该方法。适用于一些需要在模板中进行交互或处理事件的情况。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值