1.Computed
1.它支持缓存,只有依赖的数据发生变化时,才会重新计算
2.不支持异步,当Computed中有异步操作时,无法监听数据的变化
3.computed的值会默认走缓存,计算属性是基于他们的响应式依赖进行缓存的,即基于data声明过的或者父组件传递过来的props的数据进行计算的
4.如果一个属性是由其他属性计算来的,一般使用computed
5.如果computed属性的属性值时函数,那么默认使用get方法,函数返回值就是属性的属性值,在computed中,属性有一个get方法和一个set方法,当数据发生变化时,会调用set方法
2.Wacth
1.它不支持缓存,数据变化时,就会触发相应的操作
2.支持异步监听
3.属性是一个对象,对象中有一个函数,函数接收两个参数,分别是新值和旧值
4.当一个属性发生变化时,就需要执行相应的操作
- 监听数据必须是data中声明的或者父组件传递过来的props中的数据,当发生变化时,会触发其他操作,函数有两个的参数:
- immediate:组件加载立即触发回调函数
- deep:深度监听,发现数据内部的变化,在复杂数据类型中使用,例如数组中的对象发生变化。需要注意的是,deep无法监听到数组和对象内部的变化。当想要执行异步或者昂贵的操作以响应不断的变化时,就需要使用watch。
3.总结
- computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
- watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
4.场景
- 当需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。
- 当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。