Vue中watch和methods两种属性的作用

当开发Vue应用时，经常需要对数据进行监听和操作，Vue提供了两个可以用来处理这些需求的属性：watch和methods。

watch属性的作用

watch属性可以用来监听数据变化，当监听到指定的数据发生变化时，会自动执行对应的回调函数。watch属性非常适合用来实现数据监听和异步操作。

具体来说，当watch监听到指定的数据发生变化时，会执行指定的回调函数，回调函数通常会执行一些延迟操作，例如发送请求等。当操作完成后，可以再次通过Vue的双向绑定机制自动更新界面。

以下是一个简单的示例，通过watch监听输入框的内容变化，并在输入框中输入完成后，将输入的内容发送到服务器端进行处理：

<template>
  <div>
    <input v-model="message" />
    <p>{{ response }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '',
        response: ''
      }
    },
    watch: {
      message(newVal, oldVal) {
        this.getResponse(newVal);
      }
    },
    methods: {
      async getResponse(message) {
        // 发送请求并获取处理结果
        const response = await fetch('/api', {
          method: 'POST',
          body: JSON.stringify({ message }),
          headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json());
        this.response = response;
      }
    }
  }
</script>

在上述代码中，我们定义了一个名为message的响应式数据，并通过watch属性监听其变化。当输入框的内容发生变化时，watch会自动调用getResponse方法，并向服务器发送请求。请求返回后，我们再次通过Vue双向绑定机制更新response的值，从而实现页面的更新。

methods属性的作用

methods属性可以用来定义Vue实例的方法，并且这些方法会被注入到Vue实例中。在Vue模板中可以通过v-on指令调用methods中定义的方法来响应用户的操作。

methods属性非常适合用来处理用户交互和业务逻辑，例如表单校验、按钮点击等。

以下是一个示例，通过methods定义一个名为submitForm的方法，在用户提交表单时进行校验并向服务器端发送请求：

<template>
  <div>
    <form v-on:submit.prevent="submitForm">
      <label for="username">用户名：</label>
      <input name="username" v-model="username" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: ''
      }
    },
    methods: {
      async submitForm() {
        if (!this.username) {
          alert('请输入用户名');
          return;
        }
        // 发送请求并获取处理结果
        const response = await fetch('/api', {
          method: 'POST',
          body: JSON.stringify({ username: this.username }),
          headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json());
        console.log(response);
      }
    }
  }
</script>

在上述代码中，我们通过v-on指令将submitForm方法绑定到form元素的submit事件上。当用户点击提交按钮时，methods会自动执行submitForm方法，对表单进行校验并向服务器发送请求。

综上所述，watch属性用于实现数据监听和异步操作，methods属性用于响应用户操作和业务逻辑。两者相辅相成，是Vue应用中必不可少的两个属性。