vue3watch监听代码

在Vue 3中，`watch`是一个响应式属性，用于监听数据的变化并执行回调函数。当你想在数据发生改变时执行一些操作，可以使用`watch`。它的工作原理类似于React的`useEffect`，但更专注于只监听指定的属性。

基本语法如下：

// 创建一个watcher
const watcher = this.$watch('yourData', (newVal, oldVal) => {
  // 当yourData发生变化时，这个回调会被执行
  console.log(`New value is ${newVal}, old value was ${oldVal}`);
});

// 如果只需要在初次渲染时运行一次，可以设置immediate选项为true
this.$watch('yourData', () => {
  // ...
}, { immediate: true });

// 关闭watcher（停止监听）
watcher();

你可以选择监听单个属性、数组的变动、对象的深度变化等。如果你只想在数据变化时触发一次，可以提供第二个参数`immediate`为`true`。记得在不再需要监听的时候调用`watcher()`关闭监听。

相关问题

vue3 watch监听

Vue 3 中的 watch 监听器与 Vue 2 中的 watch 是有一些不同的。在 Vue 3 中，watch 监听器被分成了两种类型：immediate 和 lazy。

首先，让我们看一下 immediate 类型的 watch 监听器。它会在初始渲染时立即执行一次回调函数，并且会在侦听的属性变化时再次执行。可以通过将 immediate 属性设置为 true 来创建一个 immediate 类型的监听器。

watch('property', (newVal, oldVal) => {
  // 回调函数
}, {
  immediate: true
});

接下来，是 lazy 类型的 watch 监听器。它不会在初始渲染时执行回调函数，只有在侦听的属性发生变化后才会执行。可以通过将 lazy 属性设置为 true 来创建一个 lazy 类型的监听器。

watch('property', (newVal, oldVal) => {
  // 回调函数
}, {
  lazy: true
});

此外，Vue 3 还引入了一个新的 API，叫做 watchEffect。watchEffect 函数可以用来监听响应式数据的变化，并在其变化时执行副作用的函数。它不需要显式地指定侦听的属性，而是会自动追踪响应式数据的变化。

watchEffect(() => {
  // 响应式数据变化时执行的副作用函数
});

vue3watch监听reactive

Vue 3 中的 watch API 用于监听响应式数据变化，并在数据变化时执行一些操作。如果你想监听一个 reactive 对象的变化，可以使用 watchEffect 或者 watch API。下面是一个示例：

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0,
});

watchEffect(() => {
  console.log(state.count);
});

在上面的代码中，我们创建了一个响应式对象 state，然后使用 watchEffect 监听 count 属性的变化，并在控制台输出 count 的值。

如果你想对变化进行更精细的控制，可以使用 watch API。下面是一个示例：

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
});

watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(`count 变为 ${newVal}，原来的值为 ${oldVal}`);
  }
);

在上面的代码中，我们使用 watch 监听 count 属性的变化，并在控制台输出新值和旧值。