vue3 watch组合式开发

Vue3中的watch API已经进行了重构，现在可以使用watchEffect和watch来实现组合式开发。其中，watchEffect可以监听响应式数据的变化，并在回调函数中执行相应的操作；而watch则可以监听指定的响应式数据，并在其变化时执行回调函数。

例如，我们可以使用watchEffect来监听一个计算属性的变化：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(`count is ${state.count}`)
})

当count发生变化时，控制台会输出相应的信息。

而如果我们想要监听某个具体的响应式数据，可以使用watch：

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0
})

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

在这个例子中，我们监听了state.count的变化，并在其变化时输出相应的信息。

相关问题

vue watch 组合式api使用详细

Vue 3中新增了一个叫做“组合式API”的特性，它可以让我们更加方便地组织和复用代码。其中一个非常实用的功能是`watch`，它可以监听一个数据的变化并在变化时触发一些操作。

下面是一个使用`watch`的例子：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })

    return {
      count
    }
  }
}

在上面的代码中，我们定义了一个`count`变量，它是一个响应式的变量。我们使用`watch`函数来监听这个变量的变化，并在变化时打印出变化前后的值。

需要注意的是，`watch`函数的第一个参数可以是一个响应式的变量，也可以是一个返回响应式变量的函数。例如：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    watch(
      () => doubleCount.value,
      (newValue, oldValue) => {
        console.log(`doubleCount changed from ${oldValue} to ${newValue}`)
      }
    )

    return {
      count
    }
  }
}

在上面的代码中，我们定义了一个`doubleCount`变量，它是一个计算属性，它的值是`count`的两倍。我们使用`watch`函数来监听`doubleCount`的变化，并在变化时打印出变化前后的值。需要注意的是，我们将`doubleCount`包装在一个返回响应式变量的函数中，这样`watch`函数就可以正确地监听到`doubleCount`的变化了。

除了上面的例子，`watch`函数还支持很多其他的用法，例如：

- 监听多个变量的变化
- 使用`immediate`选项来立即执行回调函数
- 使用`deep`选项来监听对象或数组的深层变化

总之，`watch`函数非常实用，可以让我们方便地监听和处理数据的变化。如果你想了解更多关于`watch`函数的用法，请参考Vue 3的官方文档。

vue组合式watch

在Vue 3中，watch被改造成了一个组合式的API。使用组合式API时，需要从Vue中引入watch函数，并在setup函数中进行配置。

下面是一个示例，演示了如何使用组合式watch来监视ref定义的数据：

import { ref, watch } from 'vue';

setup() {
  const count = ref(0);

  watch(count, (newValue, oldValue) => {
    console.log(`count的值从${oldValue}变为${newValue}`);
  });

  return {
    count
  };
}

在上面的示例中，我们首先从Vue中引入了ref和watch函数。然后，在setup函数中定义了一个名为count的ref数据。接下来，我们使用watch函数来监视count的变化，并在回调函数中打印出新旧值。

需要注意的是，watch函数的第一个参数可以是一个ref对象，也可以是一个返回ref对象的函数。在这个例子中，我们直接使用了count作为watch的第一个参数。

通过这种方式，我们可以方便地使用组合式watch来监视Vue 3中的数据变化。