computed和watch的使用场景和区别

bigdargon

已于 2022-04-26 16:01:40 修改

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 html5 vue遇到的问题

于 2022-02-17 16:35:19 首次发布

本文链接：https://blog.csdn.net/bigdargon/article/details/122986101

版权

本文详细介绍了Vue.js中computed和watch的使用场景和区别。computed适用于根据多个data属性计算出新值的场景，它依赖于data中的属性变化并自动更新。而watch则用于监听特定data属性的变化，当属性值发生变化时执行指定回调。在watch中，可以进行深度监听以应对引用类型数据的变更，并要注意处理数组变化的特殊情况。

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

使用场景

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

区别


```javascript
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。
5、写法：watc

最低0.47元/天解锁文章