Vue Watch监听方法总结

在Vue应用中，我们经常需要对数据进行监听，当数据发生改变时，我们需要对其做出相应的操作，这时我们可以使用Vue提供的watch监听方法。本文将对Vue的watch监听方法进行详细讲解，并通过示例说明。

Vue Watch监听方法用法

Vue的watch监听方法主要是用于监听数据的变化。当监听的数据发生变化时，Vue会自动调用watch监听方法，并传递新值和旧值两个参数，我们可以在watch监听方法中对数据进行相应的操作。

简单的watch监听

我们可以在Vue实例中使用简单的watch监听方法，如下所示：

watch: {
  // 监听message的变化
  message: function(newVal, oldVal) {
    console.log(`新值为：${newVal}，旧值为：${oldVal}`);
  }
}

上述代码中，我们对Vue实例中的message值进行了监听，当message值发生变化时，控制台将打印出新值和旧值。

深度watch监听

Vue的watch监听方法还可以针对对象或数组进行深度监听。当对象或数组中的属性发生变化时，Vue会自动调用深度watch监听方法。下面是一个深度watch监听对象的例子：

watch: {
  // 监听person对象的变化
  person: {
    handler: function(newVal, oldVal) {
      console.log(`新值为：${JSON.stringify(newVal)}，旧值为：${JSON.stringify(oldVal)}`);
    },
    deep: true
  }
}

上述代码中，我们对Vue实例中的person对象进行了深度监听，当person对象中的属性发生变化时，控制台将打印出新值和旧值。

Vue Watch监听方法示例说明

下面通过两个示例来进一步说明Vue的watch监听方法。

示例一

我们创建一个计算属性，用于计算数组中所有元素的总和，如下所示：

<template>
  <div>
    <ul>
      <li v-for="num in nums">{{ num }}</li>
    </ul>
    <p>总和为：{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nums: [1, 2, 3, 4]
    };
  },
  computed: {
    sum() {
      return this.nums.reduce((a, b) => a + b);
    }
  }
};
</script>

上述代码中，我们创建了一个数组nums，然后通过computed计算属性来计算数组中所有元素的总和。当我们修改数组nums时，计算属性sum也会随之改变。

现在，我们想在数组nums发生变化时打印出新值和旧值，可以使用Vue的watch监听方法，代码如下：

watch: {
  nums: function(newVal, oldVal) {
    console.log(`新值为：${newVal}，旧值为：${oldVal}`);
  }
}

当数组nums发生变化时，控制台将打印出新值和旧值。

示例二

我们创建一个组件MyInput，它包含一个input输入框和一个按钮，当用户点击按钮时，控制台将打印出输入框中的文本内容。如下所示：

<template>
  <div>
    <input v-model="inputText" />
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    handleClick() {
      console.log(this.inputText);
    }
  }
};
</script>

上述代码中，我们实现了一个简单的输入框和按钮功能，当用户点击按钮时，控制台将打印出输入框中的文本内容。

现在，我们想在用户输入文本时自动打印出文本内容。可以使用Vue的watch监听方法，代码如下：

watch: {
  inputText: function(newVal, oldVal) {
    console.log(newVal);
  }
}

当用户输入文本时，控制台将自动打印出文本内容。

总结

Vue的watch监听方法提供了一种方便的方法来监听数据的变化，深度watch监听还可以针对对象或数组进行深入监听。在实际开发中，我们可以根据具体的需要来使用watch监听方法，实现更灵活的数据监听功能。