深入探究computed 、watch 、methods的使用场景及其差异

### 1. computed：计算属性

computed属性是Vue中一种特殊的属性，它允许您定义一个计算属性，该属性的值依赖于其他响应式属性。当这些依赖项发生变化时，computed属性的值也会自动更新。

举个例子，假设您有一个名为`fullName`的计算属性，它依赖于两个响应式属性`firstName`和`lastName`。当`firstName`或`lastName`发生变化时，`fullName`的值也会自动更新。

```javascript
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

使用computed属性可以避免您在模板中重复计算和拼接数据，从而提高代码的可读性和维护性。

2. watch：侦听器

watch属性允许您侦听某个响应式属性的变化，并在变化发生时执行特定的操作。您可以通过在watch属性中定义一个回调函数来实现这一点。

例如，假设您想要在firstName属性发生变化时更新另一个属性greeting。您可以使用watch属性来实现。

export default {
  data() {
    return {
      firstName: 'John',
      greeting: ''
    }
  },
  watch: {
    firstName(newVal, oldVal) {
      this.greeting = `Hello, ${newVal}!`
    }
  }
}

在上面的例子中，当firstName属性发生变化时，watch回调函数就会被触发，并将新的值和旧的值作为参数传入。您可以在回调函数中执行任何您需要做的操作，例如更新其他属性、调用方法等。

3. methods：方法

methods属性允许您定义方法，这些方法可以从模板中调用。方法可以执行各种操作，例如处理用户输入、调用API、更新数据等。

例如，您可以定义一个名为sayHello的方法，在模板中通过v-on:click事件绑定到一个按钮上。当按钮被点击时，sayHello方法就会被调用，并执行您在方法中定义的操作。

export default {
  methods: {
    sayHello() {
      alert('Hello, world!')
    }
  }
}

4. 使用场景和区别

computed、watch和methods是Vue中用于响应式数据管理的三种不同属性，它们各有其独特的用途。

• computed: 适用于需要根据其他响应式属性计算得出的值的情况。computed属性的值是只读的，您无法直接修改它们。

• watch: 适用于需要侦听某个响应式属性的变化并执行特定操作的情况。watch属性可以侦听多个属性，并且您可以在回调函数中执行任何您需要做的操作。

• methods: 适用于需要定义可从模板中调用的方法的情况。方法可以执行各种操作，例如处理用户输入、调用API、更新数据等。

总的来说，computed属性用于计算数据，watch属性用于侦听数据变化，methods属性用于定义方法。

5. 性能优化

在使用computed、watch和methods时，需要注意以下几点来优化性能：

• 避免在computed属性中执行耗时的操作，例如网络请求或复杂的计算。
• 避免在watch回调函数中执行耗时的操作，特别是当您侦听多个属性时。
• 尽可能地将方法定义在methods属性中，而不是直接写在模板中。

通过遵循这些建议，您可以优化Vue应用程序的性能和响应性。