computed 和 watch 有什么区别及运用场景

computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

watch:没有缓存性,更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;当我们需要深度监听对象中的属性时,可以打开deep:true选项,这样便会对对象中的每一项进行监听

运用场景:

当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;可以理解为一个结果受到多个因素的影响。

当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用watch选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。该数据可以影响多个结果。

作者:时间的溺水者
链接:https://www.jianshu.com/p/a575f18f0bd2
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

### Vue.js 中 `watch` `computed` 的区别及使用场景 #### 计算属性 (`computed`) 计算属性用于声明式地描述基于其他响应式属性派生的状态。每当依赖项发生变化时,计算属性会自动重新求值。 ```javascript var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } }); ``` 这种情况下,只要 `firstName` 或者 `lastName` 发生变化,`fullName` 就会被更新并反映在视图上[^4]。 #### 监听器 (`watch`) 相比之下,`watch` 更适合执行异步操作或开销较大的处理逻辑。它允许开发者显式地定义如何应对特定数据的变化,并能访问新旧两个状态值。 ```javascript vm.$watch('a.b.c', function (newValue, oldValue) { console.log(`Property changed from ${oldValue} to ${newValue}`); }); // 或者通过选项参数配置更复杂的监听行为 vm.$watch( function () { return this.a + this.b; }, function (newValue, oldValue) { console.log(`Sum of a and b has been updated`); }, { immediate: true, deep: true } ); ``` 这里展示了两种不同类型的监听方式:一种是对某个具体路径下的属性进行监视;另一种则是利用回调函数来动态构建要观察的内容[^3]。 #### 主要差异总结 - **缓存机制**:计算属性具有内置缓存功能,只有在其所依赖的数据发生改变时才会再次计算结果;而每次触发相应的事件后,侦听器都会立即运行指定的操作。 - **适用范围**:如果仅仅是简单组合现有数据,则推荐优先考虑采用计算属性的形式实现;反之对于那些涉及复杂业务流程或是需要频繁交互的任务来说,应该倾向于运用 watcher 来完成相应的需求[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值