Vue.js 中使用 watch 监听数据变化的方法

在 Vue.js 中，我们可以使用 watch 来监听数据的变化，从而在数据变化时执行一些操作。本文将详细介绍 Vue.js 中 watch 的使用方法，并提供示例代码，帮助读者更好地理解和使用该功能。

watch 的基本用法

在 Vue.js 中，我们可以使用 watch 来监听一个数据的变化。watch 的基本用法如下：

watch: {
  myData: function (newValue, oldValue) {
    // 在 myData 变化时执行的操作
  }
}

在上面的代码中，我们通过 watch 监听了一个名为 myData 的数据。当 myData 发生变化时，会执行一个回调函数，该回调函数的第一个参数为新的值，第二个参数为旧的值。

如果我们想要监听多个数据，可以使用对象的方式：

watch: {
  myData1: function (newValue, oldValue) {
    // 在 myData1 变化时执行的操作
  },
  myData2: function (newValue, oldValue) {
    // 在 myData2 变化时执行的操作
  },
  // ...
}

watch 的深度监听

在默认情况下，watch 只会监听数据的第一层变化。如果我们要监听一个对象或数组内部的变化，可以使用深度监听。如下：

watch: {
  myData: {
    handler: function (newValue, oldValue) {
      // 在 myData 变化时执行的操作
    },
    deep: true
  }
}

在上面的代码中，我们通过 deep: true 来开启了深度监听。这样，当 myData 内部的数据发生变化时，也会触发回调函数。

watch 和 computed 的区别

在 Vue.js 中，除了 watch，还有一个功能类似的概念，那就是 computed。它们的区别在于：

• computed 适用于计算一个新的值，而 watch 适用于在数据变化时执行一些操作。
• computed 只有在依赖的数据变化时才会重新计算新的值，而 watch 每次数据变化都会执行回调函数。

因此，如果需要计算一个新的值并将其绑定到模板中，应该使用 computed；如果需要在数据变化时执行一些操作，应该使用 watch。

watch 的使用示例

下面是一个使用 watch 监听数据变化的示例：

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      greeting: ''
    }
  },
  watch: {
    name: function (newValue, oldValue) {
      this.greeting = `Hello, ${newValue}!`
    }
  }
}
</script>

在上面的代码中，我们监听了一个名为 name 的数据。当 name 发生变化时，我们通过回调函数将新的值拼接成一个问候语，并将其赋值给 greeting。最终，在模板中显示出来。

总结

本文介绍了 Vue.js 中使用 watch 监听数据变化的方法，包括基本用法、深度监听、与 computed 的区别以及使用示例。通过学习本文，读者可以更好地使用 watch 功能，提高 Vue.js 应用程序的开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e850eeb4cecbf2d468303