watch 监听对象

在Vue中，可以使用watch来监听对象的变化。具体实现方法如下：

watch: {
  obj: {
    handler: function (newVal, oldVal) {
      // 对象发生变化时的处理逻辑
    },
    deep: true // 设置为深度监听
  }
}

上述代码中，`obj`是要监听的对象，`handler`是当对象发生变化时的处理逻辑，`newVal`和`oldVal`分别表示新值和旧值。`deep`设置为`true`可以进行深度监听，当对象中的属性发生变化时，也会调用`handler`方法。

除了对象，还可以监听数组、字符串等类型的变化。例如，监听数组变化的代码如下：

watch: {
  arr: {
    handler: function (newVal, oldVal) {
      // 数组发生变化时的处理逻辑
    },
    deep: true // 设置为深度监听
  }
}

相关问题

vue2watch监听对象

在 Vue2 中，可以使用 $watch 监听一个对象的属性，并在值改变时触发回调函数。具体的用法为：

vm.$watch('obj.prop', function (newVal, oldVal) {
  // do something
})

其中，'obj.prop' 是需要监听的属性路径，newVal 和 oldVal 分别表示新值和旧值。

如果需要监听多个属性，可以使用 $watch 的第一个参数是一个函数的形式：

vm.$watch(
  function () {
    return {
      prop1: this.obj.prop1,
      prop2: this.obj.prop2
    }
  },
  function (newVal, oldVal) {
    // do something
  },
  { deep: true }
)

在这个例子中，$watch 监听的是一个函数，返回一个对象，包含了需要监听的属性。当这些属性中的任意一个值改变时，回调函数就会被触发。

vue3.0 watch 监听对象

在Vue 3.0中，watch被重构以提供更灵活和强大的对象监听功能。

在Vue 3.0中，我们可以通过创建一个watcher实例来监听对象的变化。以下是使用watch监听对象的步骤：

首先，我们需要使用`watch`函数来定义一个watcher实例并指定需要监听的对象。例如：

const myObject = {
  firstName: 'John',
  lastName: 'Doe'
}

watch(myObject, (newValue, oldValue) => {
  console.log('Object changed:', newValue, oldValue)
})

在这个例子中，我们创建了一个名为`myObject`的对象，并将其传递给`watch`函数。然后，我们传递了一个回调函数，每当对象发生变化时，这个回调函数就会被调用。回调函数的参数是新值和旧值。

然后，我们可以通过改变对象的属性来测试监听。例如，我们可以使用以下代码来修改`myObject`的`firstName`属性：

myObject.firstName = 'Jane'

在控制台中，你将看到输出：`Object changed: { firstName: 'Jane', lastName: 'Doe' } { firstName: 'John', lastName: 'Doe' }`。这表明对象已经发生了变化，并且新值和旧值都被传递给了回调函数。

除了基本的对象监听外，Vue 3.0还提供了更高级的监听选项。例如，我们可以使用`deep`选项来深度监听对象的属性变化，或使用`immediate`选项来立即执行回调函数。

总之，Vue 3.0的watch提供了一种方便的方法来监听对象的变化，并在变化发生时执行特定的操作。无论是简单的对象还是复杂的嵌套对象，watch都能够准确地捕捉到其变化。