Vue中计算属性computed和监视属性watch的区别

最新推荐文章于 2025-07-04 16:05:28 发布
最新推荐文章于 2025-07-04 16:05:28 发布
阅读量706 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45525653/article/details/120602377
本文详细比较了Vue.js中的计算属性(computed)和监视属性(watch)，阐述它们的相似点、不同功能，以及在实际开发中的使用原则，帮助开发者理解何时选择哪种方式来响应数据变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue中计算属性computed和监视属性watch的区别

computed和watch的相同之处：

computed和watch都是观察页面的数据变化的。

computed和watch之间的区别

  • computed能完成的功能，watch都能完成
  • watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

使用中的原则

  • 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实力对象
  • 所有不被Vue所管理的函数（定时器⏲️的回调函数，ajax的回调函数，Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象
ChuanYang Chen
关注
Vue----计算属性和监视(侦听)属性的详细讲解及区别
weixin_74261569的博客
01-08 2236
以上的监视的属性是isHot，假如是对info进行监视，如果是不存 在的属性，则无法实现监视。原理:：底层借助了objcet.defineproperty方法提供的getter和setter。作用：如果模板中需要过多逻辑，用常规写法会导致模板过重且难维护，这时候就应使用。以上图里的计算属性是简写，如果计算属性要被修改，那必须写。当被监视的属性变化时，回调函数自动(handler)调用。根据自己的需求选择用methods方法还是计算属性。（注：这里的this指的是vm实例 ）
Vue(二) 计算属性computed、监视属性watch、绑定class和style、条件渲染v-show,v-if；列表v-for，key的原理、收集表单数据、过滤器|
lxh的博客
08-29 1871
计算属性computed、监视属性watch；绑定class与style样式；v-if；v-for；v-for里key的原理，虚拟DOM对比；列表过滤filter，列表排序sort，Vue检测数据、对象的原理；手机表单数据；管道过滤器
vue：计算属性和监视属性的区别和内在联系
helloWorldJavaQi的博客
12-01 272
前端初级学习总结 1.<button onclick="click()">点我</button> 其中click命名的自定义函数不会生效，而且不会报错，click是js中的原有函数，不可以用作自定义函数名 2.计算属性computed：两个因素：基于计算依赖的的data中的数据属性；？；。简化格式必须只有读取数据而没有写数据的情况才可以，相对methods来说性能更好，有缓存机制，第一次读取数据的时候，会通过getter从data中取数据，然后会自动加载进缓存，第二次读取，只要数据没
Vue中计算属性(computed)和侦听器(watch)的区别详解
最新发布
qq_44919431的博客
07-04 428
Vue.js中computed与watch的核心区别与适用场景 摘要： computed是声明式的计算属性，具有缓存特性，适合数据转换和派生（如格式化、过滤等），必须返回结果且不支持异步操作。watch是命令式的侦听器，无缓存，适合响应数据变化执行副作用（如API调用、日志记录等），支持异步且无需返回值。主要区别体现在：设计目的（数据转换 vs 响应变化）、执行机制（惰性计算 vs 即时执行）、缓存性（有 vs 无）和异步支持（不支持 vs 支持）。
计算属性computed和watch的区别
Lonely__Patients的博客
07-25 269
computed是用来声明式的描述一个值依赖其它的值，当所有依赖的值或者变量改变的时候，计算属性也会随着该变；此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性，其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;计算属性的依赖值改变会重新执行函数，计算属性是取返回值来作为最新的结果，所以里面不能异步的返回结果，不能写异步逻辑。...
计算属性和监视属性
m0_62513791的博客
04-29 217
而set()方法可以帮助我们修改fullname属性的取值，没有set()方法我们无法修改属性。计算属性也是属性，最终也会被数据代理出现在vm的身上，就像firstname和lastname一样，可以在模板中读取使用。：简单理解，无需我们自己主动去调用函数，当满足一定条件的时候，程序会自动帮我们执行的函数。表示第一次解析模板的时候回调函数就先执行一次，因为第一次解析模板的时候是没有值的变化的。它是用来检测属性的值的变化的。计算属性简写的前提：我们只需要读取该属性的值，而不需要修改该属性时。
vue中计算属性computed与属性检测watch的区别
Start_t的博客
10-07 616
Vue中computed与watch的区别计算属性属性检测 计算属性computed 属性检测watch 首次运行 首次不运行 调用时需要在模板中渲染，修改计算所依赖元数据 调用时只需修改元数据 默认深度依赖 默认浅度观测 适合做筛选，不可异步 适合做执行异步或开销较大的操作 计算属性 <!DOCTYPE html> <html> <...
vue计算属性(computed)和侦听器(watch)
y516369的博客
06-09 1275
Vue计算属性(computed)和侦听器(watch)
Vue3(二)计算属性Computed，监视属性watch，watchEffect,标签的ref属性，propos属性，生命周期，自定义hook
lxh的博客
09-23 1407
计算属性computed:简写+完整写法；监视属性watch的五种情况，最后总结了什么情况下是默认开启深度监听，什么情况需要手动开始深度监听；watchEffect没什么重点；标签的ref属性：用在普通标签上是打标识(很神奇)，用在组件标签上可以实现组件传值。propos实现父给子传值，重要！；生命周期没啥好说的；自定义hook真正体现了组合式API的风格
【前端学习指南】Vue computed 计算属性 & watch 监听器
范同学的学习历程
11-14 1791
message被监听，一旦它的值发生变化，watch会调用对应的回调函数，newValue是新值，oldValue是旧值。可以在这个回调中做其他逻辑操作，比如发起异步请求、验证数据、或者进行其他逻辑处理。这种方式适用于当你需要在数据变化时执行一些操作，且该操作不适合放在computed中的情况。data() {return {},},watch: {// 监听 message 的变化。
Vue3的监听属性watch和计算属性computed
qq_43151592的博客
04-18 2099
Vue3的监听属性watch和计算属性computed
计算属性computed和监视属性watch的区别
qq_43102118的博客
11-21 848
计算属性和监视属性的区别 计算属性(computed) 定义：要用的属性不存在，得通过data中已有的属性计算得来 原理：底层通过Object.defineproperty方法提供的getter和setter computed中可以分为getter和setter，一般情况下是没setter get函数什么时候执行 初次读取计算属性时会执行一次 当依赖的数据发生改变时会被再次调用 优点：内部有缓存机制，可复用，效率高，调式方便 注意：如果计算属性要被修改，必须写set函数去响应修改 <div id=
vue的计算属性和监视属性
qq_52619560的博客
07-20 382
计算属性: 1. 定义:要用的属性不存在,要通过已有的属性计算得来 监视属性watch: 1. 当监视的属性变化时,回调函数自动调用,进行相关操作 2. 监视的属性必须存在,才能进行监视 3. 监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm.$watch监视...
Vue中的computed(计算属性)和watch(监听属性)的区别
m0_70647221的博客
05-09 2484
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 如果computed属性属性值是函数 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中..
计算属性_计算属性computed和watch的区别
weixin_39759995的博客
01-12 99
computed: 当一个属性受多个属性影响的时候就需要用computed computed可以监听data中的值，只要值发生变化 他就会重新去计算 computed必须是要有一个返回值的哦 eg1：购物车商品结算时候。当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。 data: { return{ ...
计算属性和监视
qq_40052011的博客
10-16 414
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。 1.计算属性 在computed属性对象中定义计算属性的方法 在页面总使用{{方法名}}来显示计算的结果。 2.监视属性 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时，回调函数自动调用，在函数内部进行计算 ...
Vue-Vue中计算属性computed和监视属性watch的区别
zzming的博客
08-18 251
※computed计算属性函数中不能添加异步回调函数，而watch中可以 我们在日常开发中，很多案例既可以用watch实现，也可以用computed实现,z在两者皆可的情况下，我们优先选择更加方便的computed计算属性来实现，但是如果存在computed行不通的案例怎么办？我们来看一下以下案例 我们通过输入姓和名，要求输出全名 我们用计算属性来写这个案例： <div id="app"> 姓:<input type="text" v-model="firstName"&g
computed计算属性和watch的区别
qq_44885374的博客
02-05 646
computed计算属性用于描述一个值依赖了其他值。当你在把模板里的数据绑定到计算属性上时，vue会在其依赖的值发生变化而导致计算属性改变更新dom。 watch监听器 用来监听一个你定义的变量，当该变量发生变化时，会调用对应的方法。 <div>{{name}}</div> data(){ return{ number:0, firstname:"", lastna...
vue3中computed计算属性和watch监听的异同点
12-27
### Vue3 中 `computed` 计算属性与 `watch` 监听的区别和共同点 #### 区别 - **缓存机制** - 计算属性具有缓存特性，这意味着只有在其依赖项发生变化时才会重新计算。这有助于提高性能，减少不必要的重复运算[^1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值