Vue中的methods、computed计算属性和watch监听属性的使用和区别

在Vue中，methods、computed和watch是三种不同的方式来处理数据和响应数据变化的方法。

methods： methods是Vue实例的一个属性，可以定义一系列的方法，并通过调用这些方法来实现一些功能。methods中的方法可以接收参数，也可以调用其他方法。在模板中可以使用v-on指令来绑定methods中的方法。

例如，下面是一个methods的示例代码：

new Vue({
  data: {
    message: 'Hello World'
  },
  methods: {
    sayHello: function () {
      console.log(this.message)
    }
  }
})

在模板中，我们可以通过v-on:click来绑定methods中的方法：

<button v-on:click="sayHello">Click me</button>

computed： computed是Vue实例的一个属性，可以定义一些计算属性。computed中的属性会根据依赖的数据自动更新，只要依赖的数据发生改变，计算属性就会重新计算并返回新的值。computed属性是通过getter函数来实现的。

例如，下面是一个computed的示例代码：

new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在模板中，我们可以直接在插值表达式中使用computed属性：

<p>{
   
   { reversedMessage }}</p>

watch： watch是Vue实例的一个属性，可以监听指定的数据变化，并在数据变化时执行指定的函数。watch可以监听一个或多个数据的变化，并可以执行一些异步操作。

例如，下面是一个watch的示例代码：

new Vue({
  data: {
    message: 'Hello World'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

在模板中，我们可以通过给data属性赋值来改变数据，并触发watch的监听函数：

<input v-model="message">

以上就是methods、computed和watch的使用和区别。methods主要用于绑定事件和实现一些功能的方法，computed主要用于计算属性，watch主要用于监听数据的变化并执行相应的操作。