Computed
- 支持缓存,计算的结果不管调用多少次,都是从缓存中取,只有依赖的数据发生了变化,才会从新计算。
- 不支持异步,当 Computed 中有异步操作时,无法监听数据的变化。
- Computed 的值会默认走缓存,计算属性是基于它们的响应依赖进行缓存的,也就是data声明过,或者父组件传递过来的props中的数据进行计算的。
- 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般会使用Computed。
- 如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;在computed中,属性有一个get方法和一个set方法,当数据发生变化时,会调用set方法。但是,set方法需要手动去写。
Watch
- 它不支持缓存,他侦听的数据发生变化时,他就会触发相应的操作;
- 支持异步监听;
- 监听到的函数必须是data中声明过,或者父组件传递过来的props中的数据,当被侦听的数据发生变化后,会触发其他操作,函数有两个的参数:
- immediate:组件加载立即触发回调函数
- deep:为true时,开启深度监听,发现数据内部的变化,在复杂数据类型中使用,例如数组中的对象变化。
建议
- 出于性能考虑,能用计算属性 Computed 就别用侦听器 Watch ,因为侦听器默认不会缓存,虽然侦听器可以实现和计算属性一样的功能,但是,每次取值不管依赖的数据有没有变化,都会从新计算,对性能存在浪费。
- 如果是要执行异步 或者某数据的变化时要执行对应的代码时,就需要使用 Watch;
总结
- Computed 计算属性:依赖其它属性值,且 Computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 Computed 的值时,才会重新计算 Computed 的值。
- watch 侦听器 :更多的是起到侦查的作用,没有缓存性,类似于某些数据的监听回调,每当监听的数据变化时,都会执行回调进行后续操作。
运用场景
- 当需要进行数值计算,并且依赖于其它数据时,应使用 Computed ,因为可以利用 Computed 的缓存特性,避免每次获取值时都要重新计算。
- 当需要执行异步 或者某数据的变化时要执行对应的代码时,应使用 watch ,使用 watch 选项允许执行异步操作(访问一个 API),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。