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都能够准确地捕捉到其变化。