Vue的computed属性和watch，methods的区别

在Vue中，computed、watch和methods是处理响应式数据的三种方式。它们的主要区别在于计算方式、响应方式和使用场景。

computed

computed是一种计算属性，它会根据所依赖的响应式数据自动计算出一个新的值，并且该计算结果会被缓存起来，只有当所依赖的数据发生变化时才会重新计算，也就是说, 当所依赖的数据没有发生改变时, 多次访问计算属性它会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。而且computed本质上是一个只读属性，它不会修改任何响应式数据，只是根据所依赖的数据计算出一个新的值。

使用computed的好处在于它可以将复杂的计算逻辑封装在一个属性中，并且只有在需要时才会计算，并且在依赖数据没有发生变化时只返回上一次的计算缓存值，从而提高了代码的可读性和性能。

watch

watch是一种观察者模式，它会在所观察的响应式数据发生变化时执行一个回调函数，在回调中会传入newVal和oldVal两个参数。watch可以监听一个或多个响应式数据，并可以执行一些异步操作，例如发送网络请求或者操作本地存储等。

使用watch的好处在于它可以监控数据的变化并执行相应的操作。例如，我们可以使用watch来监听一个输入框的变化，并根据输入框的值发送网络请求：

watch: {
  inputValue(newValue, oldValue) {
    // 根据输入框的值发送网络请求
    fetch('http://example.com/api?query=' + newValue)
      .then(response => response.json())
      .then(data => this.result = data);
  }
}

在这个例子中，当inputValue发生变化时，watch会自动执行回调函数，并根据输入框的值发送网络请求。

methods

methods是一个普通的JavaScript方法，它可以接收参数并且可以执行任意的JavaScript代码。methods不会自动响应数据变化，需要手动调用才能更新视图。methods方法是每次调用, 都会执行函数的, methods而且它不是响应式的。

使用methods的好处在于它可以执行任意的JavaScript代码，并且可以根据具体的需求传入不同的参数。例如，我们可以使用methods来处理用户的点击事件：

methods: {
  handleClick(event) {
    // 处理用户的点击事件
    console.log('User clicked on', event.target);
  }
}

在这个例子中，当用户点击某个元素时，会调用handleClick方法，并将事件对象作为参数传入。