计算属性computed和侦听watch，方法methods的相比较的一些理解

最新推荐文章于 2022-11-12 14:26:25 发布
最新推荐文章于 2022-11-12 14:26:25 发布
阅读量462 收藏 3
点赞数 2
分类专栏： vue 文章标签： watch computed methods区别 watch  computed  methods
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCQq123321/article/details/83929989
版权

computed  vs methods

比如，我们要在页面上显示A+B的值，

methods方法：reuturn A+B

computed计算属性：return A+B

这样看起来两个是没有区别的，都是可以返回结果，而且当A或者B变化时候都是可以返回正确的结果，这个是没问题的，

但是，如果页面还有一个变量C呢，这个C变化时候页面会重新渲染，这个时候两个就有区别了：methods回去重新执行方法，而computed会读取上一次的缓存，如果有一个很复杂的计算，那对性能就有了无谓的消耗，所以就是为什么在页面上显示多个计算出来的值得时候用了computed计算属性，而不用methods方法

----------------------------------------------

computed  vs watch 两者都是可以监听变化、

比如有个需求同样是返回A+B，

computed的写法是return A+B；

watch的写法是：分两步，要监听A，也要监听B

A(){return this.A+this.B},

B(){return this.A+this.B},

这样写法上就有区别了，所以按这个需求我们可以理解下  计算属性就是要返回处理数据的一个监听集合（要监听多个）

当然，两者还有本质上的区别：比如有个需求：A变化时候B的值变为1，这个就只能是使用监听来处理了，不能使用计算属性

 

 

 

Moqin89
关注
专栏目录
vue的计算属性computed与侦听器watch
爱睡的虫虫
01-09 287
vue的计算属性computed和侦听器watch都是监听数据变化。 computed （计算） 其在vue单文件组件中就是对数据进行简单的一些逻辑计算，在项目开发中方便我们对原始数据处理。重要的是计算属性基于它的响应式依赖进行缓存的。只有当响应依赖关系变了即值发生变化了才会重新计算。否则，直接利用缓存，这样既避免多次调用函数又提升性能。 <div id="app"> {{txt}}...
侦听器watch及其和计算属性、methods方法的总结
qq_53841687的博客
07-30 868
!计算属性方法侦听器watch年龄age{{age}}el"#app","zhang","san",age18,}},{console.log("调用了fullName2,使用了一次方法")}},{console.log("调用了fullName,计算了一次属性")}},watch{初始化缓存功能https。
Computed计算属性、Watch监听属性和Methods函数的描述和区别
weixin_44441419的博客
01-10 1898
@[TOC]Computed计算属性、Watch监听属性和Methods函数的描述和区别 Computed计算属性、Watch监听属性和Methods函数的描述和区别 在 Vue 中，Computed计算属性，Watch监听，Methods方法，有很大的区别，在不同的场景下使用不同的属性，每一个属性都有自己很大的作用。 Computed计算属性 在 computed 中可以定义一些属性，这些属性叫...
认识计算属性和watch、methods
rising_sun521的博客
03-14 163
1、computed（计算属性） 它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后会缓存，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。 计算属性将被混入到Vue实例中。所有getters和setter的this上下文自动的绑定Vue实例。 注意：如果在计算属性使用了箭头函数，则this不会指...
vue中 计算属性computed 与 watch侦听器的区别
Month的博客
07-02 640
计算属性用来声明一个值依赖于另一个值，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。如果不发生改变，那么计算属性将会从缓存中读取值。计算属性不能计算在data中已经定义过的值。 watch用来侦听一个属性的变动，当属性发生变动时，触发相应的回调函数。 在有些情况下，computed和watch都可以用，由于computed会从缓存中读取值，所以性能会好...
方法，计算属性Computed，侦听属性Watch
机车双猫怪的博客
06-18 134
一、区别 方法 加(),结果不会被缓存 computed 不加(),结果会被缓存,侦听模式上多对一，不支持异步 watch 侦听模式上一对多，支持异步
Vue中methods、computed和watch属性联系及区别
xiecheng1995的博客
05-25 2507
methods属性 当我们在Vue中想要调用函数或者方法时，可以在methods中调用方法，如下： <template> <div> <h1>methods属性</h1> {{ getFullname() }} {{ getFullname() }} {{ getFullname() }} {{ getFullname() }} </div> </temp
Vue中计算属性（computed）、方法（methods）和侦听属性（watchers）的区别
m0_71345904的博客
07-28 602
对于刚开始学习Vue的开发者来说，十分容易混淆Vue中计算属性、方法和侦听属性，希望通过本文的介绍，您能了解并分辨这三者的区别。熟悉Vue的同学都知道在Vue框架中，计算属性（computed）、方法（methods）和侦听属性（watchers）充当着非常重要的角色，它们既可以用来实现相同的功能，彼此之间又存在一些不同之处。三者都有适合自己的场景，我们要想在合适的场景下灵活运用它们，必须对它们有全面的了解。...
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
计算属性、方法和侦听器都是Vue框架中的一些机制，但是它们的使用场景和特点不同： * 计算属性：缓存，依赖项改变时重新计算，适用于计算复杂的逻辑。 * 方法：每次渲染时执行，适用于简单的计算逻辑。 * 侦听器：...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
Vue中计算属性、方法与侦听属性的区别
nsnydnz的博客
10-30 424
总结： 1. 计算属性computed在使用时，一定要注意，函数里面的变量都会被监听，只要里面的某一个值变动，便会将整个函数执行一遍。 而 watch 只是监听某一个值，若是监听的值里面也有很多变量，也会全部监听   2. 计算后的属性可不在 data 中定义，如果定义会报错，因为对应的computed作为计算属性定义并返回对应的结果给这个变量,变量不可被重复定义和赋值。 而 watch 监听 data 中定义的变量变化 文章目录总结：computed特性watch特性1. 计算属性 computed2.
计算属性，方法，侦听的区别与用法
weixin_44346827的博客
05-15 347
<!DOCTYPE html> <html> <head> <title>计算属性，方法，侦听的区别与用法</title> <meta charset="utf-8"> <script type="text/javascript" src="js/vue.js"></script&gt...
计算属性computed和methods的区别
weixin_51750949的博客
08-17 86
总结：计算属性本质上是个属性，使用时没有小括号 计算属性具有缓存，不发生改变时，重复调用效率更高 <div id="app"> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{getF
vue2 watch监听中调用methods方法
奇点的博客
11-12 1545
上面是正确写法，可以调用成功。
Vue的计算属性(computed)和方法(methods)有什么区别
weixin_38289787的博客
12-10 283
方法其实是调用的计算属性的getter方法； // 在组件中 methods: { fullName: function () { return this.firstName + ' ' + this.lastName } } 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： // ... computed: { fullName: {...
vue中computed计算属性 与methods的区别
web全栈开发的博客
07-08 640
在类名的介绍中我们可以看到用到了computed计算属性的方式，computed可以以绑定的形式实现更多我们想要的操作。 computed计算属性 将当前内容与包含的内容绑定 当this.checked 或者 this.telNumber 变化的时候会引起classBtnMethod重新计算 将这三个绑定到一起起到动态处理的效果 与methods方法的区别： 加载方式的不同 以methods进...
第八章 watch监听 85 computed-计算属性的使用和3个特点
weixin_30344995的博客
06-12 97
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1....
methods ,计算属性 computed 和 watch 的区别
我的LOG
04-10 213
methods ,计算属性 computed 和 watch 的区别 1. methods 执行n次，运行n次 2. computed 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性 计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化 当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次） 3. watch watch:类似于监听机制+事件机制。 数据变化时执行异步或开销较大的操作，可以随时修改状态的变化 watc
vue计算属性（computed）和方法（methods）的区别
qq_41445106的博客
09-20 647
分别利用computed和methods实现翻转字符串的效果 计算属性computed方法： <div id="example"> <p>Reversed message: "{{ reversedMessage() }}"</p> </div> <script> var vm = new ...
watch和computed
最新发布
04-23
watch和computed是Vue.js框架中的两个重要概念，用于处理响应式数据的变化和计算属性。 1. watch（侦听器）：watch是一个用于监听数据变化的选项。当被监听的数据发生变化时，watch会执行相应的回调函数。可以用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值