vue3.0 的watch函数

Vue 3.0 中的 `watch` 函数是响应式系统的一部分，它允许你在属性发生改变时执行一些自定义的回调操作。相比于 Vue 2.x 的 `$watch`，Vue 3 引入了更简洁易用的 `watch` API。`watch` 可以接受两个参数：

1. **getter**：这是可选的，如果提供，当依赖的数据发生变化时，会自动触发回调。它是一个返回值的函数，类似于计算属性。
2. **setter**：这是一个必填的函数，会在属性被新值赋值时被调用。这通常是更新外部状态的地方，比如 DOM 或者模型本身。

`watch` 还可以接收第三个参数，称为 **deep**，默认为 false，表示浅比较；如果设为 true，则会对嵌套的对象或数组做深度监听。

例如：

watch('myValue', (newVal, oldVal) => {
  console.log(`New value: ${newVal}, Old value: ${oldVal}`);
});

// 或者使用 getter 和 setter
watch(
  () => this.computedValue,
  (newVal) => this.handleComputedChange(newVal),
  { deep: true }
);

相关问题

vue 3.0 watch写法

在 Vue 3.0 中，watch 选项已经被重构了，现在可以通过一个新的函数 watchEffect 来监听变化。这个函数可以自动追踪内部使用到的 state，来响应 state 的变化。举一个例子：

import { watchEffect } from 'vue'

setup() {
  const state = reactive({
    name: 'John',
    age: 30
  })

  watchEffect(() => {
    console.log(`name: ${state.name}, age: ${state.age}`)
  })
}

这段代码中，我们通过 watchEffect 来监听 state 的变化，每当 state 中的某个属性发生变化时，就会触发 watchEffect 中的回调函数。

当然，如果你想手动控制监听特定的属性变化，还可以使用另外一个新的函数 watch：

import { watch, reactive } from 'vue'

setup() {
  const state = reactive({
    name: 'John',
    age: 30
  })

  watch(() => state.age, (newVal, oldVal) => {
    console.log(`age changed from ${oldVal} to ${newVal}`)
  })
}

这段代码中，我们使用 watch 来监听 state 中 age 这个属性的变化，每当 age 发生变化时，就会触发 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都能够准确地捕捉到其变化。