vue3 setup watch 深层监听

在Vue3中，可以使用`watch`函数来监听数据的变化。如果要深度监听一个对象的变化，可以使用`deep`选项。下面是一个示例代码：

import { ref, watch } from 'vue'

export default {
  setup() {
    const obj = ref({
      a: {
        b: {
          c: 1
        }
      }
    })

    watch(() => obj.value, (newVal, oldVal) => {
      console.log('obj changed', newVal, oldVal)
    }, { deep: true })

    return {
      obj
    }
  }
}

在上面的代码中，我们使用了`ref`函数来创建一个响应式对象`obj`，并使用`watch`函数来监听`obj`的变化。在`watch`函数的第三个参数中，我们设置了`deep`选项为`true`，表示要深度监听`obj`的变化。这样，当`obj`中的任何一个属性发生变化时，都会触发`watch`函数的回调函数。

相关问题

vue3 setup watch 监听对象

在Vue 3的setup函数中，可以通过watch函数来监听对象的变化。具体的使用方法如下：

import { watch, reactive } from 'vue'

setup() {
  const obj = reactive({ count: 0 })

  watch(() => obj.count, (newValue, oldValue) => {
    console.log(`count is: ${newValue}`)
  })

  return {
    obj
  }
}

以上代码中，我们使用reactive函数将一个对象转换为响应式对象。然后使用watch函数来监听obj.count属性的变化，并在回调函数中处理变化后的值。在回调函数中，第一个参数是新的属性值newValue，第二个参数是旧的属性值oldValue。通过这种方式，我们可以在watch监听对象的属性。

vue3 setup watch写法

在Vue 3中，`setup` 函数是组件的新特性，它提供了一个更简洁的方式来声明式地管理组件内的响应式数据。当你需要监听某个数据的变化并在变化时执行某些操作时，可以使用 `watch` 方法。

`watch` 的基本语法如下：

import { watch } from 'vue';

setup() {
  // 定义一个局部变量或计算属性
  const currentValue = ref('initial value');

  // 使用 watch 创建一个观察者
  watch(
    // 要监视的数据源，可以是表达式、函数返回值或直接的对象属性
    (currentValue) => currentValue, 
    // 当数据源改变时执行的回调函数
    (newVal) => {
      console.log(`当前值已更新为: ${newVal}`);
    },
    {
      // 可选参数，例如 deep 是否深度监听，默认为 false
      deep: false,
      // 或者 immediate 是否立即执行一次回调，默认为 false
      immediate: true
    }
  );
}