一句话概括vue的watch和computed

一句话概括watch和computed

watch 是一对多， computed 是多对一

稍微扩展一点点：

• watch 更适合一对多的情况，一个数据源变化时可能触发多个回调函数。
• computed 更适合多对一的情况，多个数据源变化时触发一个计算属性的重新计算。

举例说明

1. watch 是一对多：(监控一个值的变化，计算出多个值)

   • watch 主要用于监听某个特定数据的变化，并在数据变化时执行特定的回调函数。
   • 一个 watch 可以监听一个数据源，并在数据源变化时触发回调。
   • 你可以有多个 watch 来监听不同的数据源，但每个 watch 只能监听一个数据源。
   • 因此，watch 更适合处理一对多的情况，即一个数据源变化时可能触发多个回调函数。

   watch: {
     dataSource1(newVal, oldVal) { //监听dataSource1 改变其他的值
       // 处理 dataSource1 变化
     },
     dataSource2(newVal, oldVal) {
       // 处理 dataSource2 变化
     }
   }
   

2. computed 是多对一：(监控多个值的变化，计算出一个值)

   • computed 主要用于计算属性，它依赖于其他响应式数据，并在这些依赖的数据变化时重新计算。
   • 一个 computed 属性可以依赖多个数据源，当任何一个数据源发生变化时，computed 属性会重新计算。
   • 因此，computed 更适合处理多对一的情况，即多个数据源变化时触发一个计算属性的重新计算。

   computed: {
     computedProperty() {
       return this.dataSource1 + this.dataSource2; //监听多个值：this.dataSource1和 this.dataSource2的变化，最后输出computedProperty的值
     }
   }