5. computed 和 watch 的区别？

对于 computed

• 它支持缓存, 只有依赖的数据发生了变化, 才会重新计算
• 不支持异步, 当 computed 中有异步操作时, 无法监听数据的变化
• computed 的值会默认走缓存, 计算属性是基于它们的响应式依赖进行缓存的, 也就是基于 data 声明过, 或者父组件传递过来的 props 中的数据进行计算的
• 如果一个属性是由其他属性计算而来的, 这个属性依赖其他的属性, 一般会使用 computed
• 如果 computed 属性的属性值是函数, 那么默认使用 get 方法, 函数的返回值就是属性的属性值, 在 computed 中, 属性有一个 get 方法和一个 set 方法, 当数据发生变化时, 会调用 set 方法

对于 watch

• 它不支持缓存, 数据变化时, 它就会触发相应的操作
• 支持异步监听
• 监听的函数接收两个参数, 第一个参数是最新的值, 第二个是变化之前的值
• 当一个属性发生变化时, 就需要执行相应的操作
• 监听数据必须是 data 中声明的或者父组件传递过来的 props 中的数据, 当发生变化时, 会触发其他操作, 函数有两个的参数:
  • immediate: 组件加载立即触发回调函数
  • deep: 深度监听, 发现数据内部的变化, 在复杂数据类型中使用, 例如数组中的对象发生变化。需要注意的是, deep 无法监听到数组和对象内部的变化

当想要执行异步或者昂贵的操作以响应不断的变化时, 就需要使用 watch。

总结

• computed 计算属性: 依赖其它属性值, 并且 computed 的值有缓存, 只有它依赖的属性值发生改变, 下一次获取 computed 的值时才会重新计算 computed 的值
• watch 侦听器: 更多的是观察的作用, 无缓存性, 类似于某些数据的监听回调, 每当监听的数据变化时都会执行回调进行后续操作

运用场景

• 当需要进行数值计算,并且依赖于其它数据时, 应该使用 computed, 因为可以利用 computed 的缓存特性, 避免每次获取值时都要重新计算
• 当需要在数据变化时执行异步或开销较大的操作时, 应该使用 watch, 使用 watch 选项允许执行异步操作 (访问一个 API), 限制执行该操作的频率, 并在得到最终结果前, 设置中间状态。这些都是计算属性无法做到的