vue3中的watch的使用

在Vue 3中，watch的使用方式与Vue 2有一些变化。在Vue 3中，watch被视为组件的选项之一，而不再是实例方法。这使得使用watch更加一致和直观。

要使用watch，你可以在Vue组件的选项对象中添加一个名为`watch`的属性。这个`watch`属性是一个包含了需要监听的数据和对应处理函数的对象。

下面是一个简单的例子，展示了如何在Vue 3中使用watch：

// Vue 3组件选项
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message的值从 ${oldValue} 变为 ${newValue}`);
    }
  }
});

app.mount('#app');

在上面的例子中，我们创建了一个Vue 3应用，并定义了一个名为`message`的响应式数据。在`watch`选项中，我们定义了一个`message`的watcher函数，它会在`message`发生变化时被调用。这个watcher函数接收两个参数：新值和旧值。在本例中，我们只是简单地将旧值和新值打印到控制台。

当`message`的值发生变化时，watcher函数会被调用，并传入新值和旧值作为参数。

除了基本用法外，Vue 3的watch还支持更多高级用法，例如可以使用`immediate`选项来立即调用watcher函数，或者使用`deep`选项来深度监听对象或数组的变化等。你可以查阅Vue 3的官方文档以获取更多详细信息。