1、区别
computed:
• 支持缓存:计算属性是基于它们的响应式依赖进行缓存的,也就是基于data声明过的属性或者props中的属性进行计算,得到的结果会缓存起来,下一次调用直接取缓存。如果相关的响应式依赖发生变化,计算属性只会重新计算一次。
• 不支持异步监听
• 计算属性有set、get方法,如果计算属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值。
watch:
• 不支持缓存
• 支持异步监听
• 监听的函数接收两个参数,第一个是最新的值,第二个是变化之前的值。监听的属性可以是data中声明过的属性或者props中的属性或者是计算属性,当数据变化时执行异步或开销较大的操作。
• watch的完整写法还有两个选项:
deep:深度监听,监听引用数据内部的变化,不论其被嵌套多深。
immediate:组件加载时就立即执行一次监听的回调。
⚠️不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
2、总结
(1)computed 计算属性 : 依赖响应式属性,支持缓存,不支持异步监听。
(2)watch 侦听器 : 更多的是观察的作用,不支持缓存,支持异步监听。
computed能完成的,watch都能完成;watch能完成的,computed未必能完成。
3、运用场景
• 当需要进行数值计算,并且依赖于其它数据时,可以使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。
使用场景:当一个值受多个属性影响的时候----比如:购物车商品结算
• 当想要执行异步或开销较大的操作以响应不断的变化时,可以使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
使用场景:当一条数据的更改影响到多条数据的时候----搜索框