vue的watch和computed适用于什么业务场景，以及具体的实现方法

Vue的watch和computed都是用于数据的监控和处理，但是它们的使用场景有所不同。

1. watch适用场景

watch适用于需要监听某个变量的变化并执行相应的操作，比如异步请求数据、处理复杂逻辑等。

watch的实现方法主要包括：

• 监听单个变量的变化：可以使用watch属性，直接将需要监听的变量当作key，对应一个函数。当该变量被赋值后，会触发该函数。
• 监听多个变量的变化：可以通过对象的形式，将需要监听的变量和对应的函数作为属性和值传入。当任意一个变量发生变化时，都会触发对应函数。

示例代码如下：

// 监听单个变量
watch: {
  name (newVal, oldVal) {
    console.log(`name:${oldVal} -> ${newVal}`)
  }
}

// 监听多个变量
watch: {
  name: function (newVal, oldVal) {
    console.log(`name:${oldVal} -> ${newVal}`)
  },
  age: function (newVal, oldVal) {
    console.log(`age:${oldVal} -> ${newVal}`)
  }
}

2. computed适用场景

computed适用于需要对一个或多个变量进行计算或处理，并提供一个计算结果的场景。比如对数据进行筛选、转换等操作，或者计算某个值的平方、次方等。

computed的实现方法主要包括：

• 处理单个变量：使用computed属性，将需要计算的变量对应一个函数，该函数返回计算结果。
• 处理多个变量：将需要计算的变量通过get函数获取，在函数中进行处理，返回处理后的结果。

示例代码如下：

// 处理单个变量
computed: {
  nameUpperCase () {
    return this.name.toUpperCase()
  }
}

// 处理多个变量
computed: {
  power () {
    return this.base ** this.exponent
  }
}

综上所述，watch适用于需要监听单个或多个变量的变化，并进行相应的操作，而computed适用于需要对一个或多个变量进行处理，并提供一个计算结果的场景。