Vue如何同时监听多个数据，了解watch背后的秘密

2023-05-21 04:25:31

揭秘Vue中的watch：监控和响应数据变化

Vue中的watch是一个强有力的工具，它允许你密切关注你的数据的变化并做出相应的反应。在本指南中，我们将深入探究watch的用法，从基本原理到高级用法，让你能充分利用这一特性。

watch的本质

watch是一个实例方法，它接收两个参数：一个表达式和一个回调函数。表达式可以是一个字符串或一个函数，它指定了你要监听的数据。一旦该数据发生变化，回调函数就会被调用。

监听单个数据

最简单的用法是监听单个数据。例如，以下代码片段监视着data中的count变量：

watch: {
  count: function (newValue, oldValue) {
    // 当count发生变化时，该回调函数被调用
    console.log(`count改变了，从${oldValue}到${newValue}`);
  }
}

同时监听多个数据

有时，你可能需要同时监听多个数据。你可以通过使用watch对象来实现这一点。watch对象是一个键值对，其中键是你想要监听的数据的名称，而值是监听该数据的回调函数。

例如，以下代码片段同时监听data中的count和name变量：

watch: {
  count: function (newValue, oldValue) {
    // 当count改变时，该回调函数被调用
    console.log(`count改变了，从${oldValue}到${newValue}`);
  },
  name: function (newValue, oldValue) {
    // 当name改变时，该回调函数被调用
    console.log(`name改变了，从${oldValue}到${newValue}`);
  }
}

在watch中使用对象

你还可以使用watch对象来监听对象。这使得你可以访问对象的属性并相应地更新它。

例如，以下代码片段监听data中的user对象：

watch: {
  user: {
    handler: function (newValue, oldValue) {
      // 当user对象改变时，该回调函数被调用
      console.log(`user改变了，从${JSON.stringify(oldValue)}到${JSON.stringify(newValue)}`);
    },
    deep: true
  }
}