vue组合式使用watch

在Vue 3的组合式API中，可以使用watch属性来监控数据的变化。通过watch属性，我们可以监听单个数据、对象或数组的变化，并在数据变化时执行相应的回调函数。回调函数可以获取到新值和旧值作为参数，并在控制台中打印出变化的信息。

下面是一个简单的例子，展示了如何使用watch属性来监听一个数据的变化：

import { ref, watch } from 'vue';

const count = ref(0);

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

count.value++; // 输出：Count changed from 0 to 1

在这个例子中，我们定义了一个名为count的响应式数据，并通过watch属性来监听它的变化。在count的值发生变化时，回调函数会被执行，并打印出变化的信息。

需要注意的是，watch属性的性能开销相对较高，因此在实际开发中需要根据具体情况选择合适的方案。如果只需要监听单个数据的变化，可以直接使用watch函数。如果需要同时监听多个数据的变化，可以使用watch函数的对象形式。

相关问题

vue组合式使用watch$emit

在Vue 3中，可以使用Composition API的`watch`函数和`$emit`方法来实现组合式的`watch`和事件传递。

要使用`watch`函数，首先要导入它，并在组件的`setup`函数中使用。例如：

import { watch } from 'vue';

export default {
  setup() {
    const value = ref('');

    watch(value, (newValue, oldValue) => {
      // 监听value的变化，并在变化时执行回调函数
      console.log(`value changed from ${oldValue} to ${newValue}`);
    });

    return {
      value
    };
  }
}

在上面的例子中，我们使用`watch`函数监听了`value`的变化，并在变化时打印出新旧值。

而要使用`$emit`方法进行事件传递，只需在组件内部调用该方法，并传递事件名称和需要传递的数据。例如：

export default {
  setup() {
    const handleClick = () => {
      // 触发名为'eventName'的事件并传递数据'testData'
      $emit('eventName', 'testData');
    };

    return {
      handleClick
    };
  }
}

在上面的例子中，我们在`handleClick`函数中调用了`$emit`方法，触发了名为'eventName'的事件，并传递了数据'testData'。

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中的数据变化。