vue3 watch 用法实例

Vue3 中的 watch 用法与 Vue2 中有所不同，以下是一个简单的实例：

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { defineComponent, watch } from 'vue';

export default defineComponent({
  name: 'WatchExample',
  setup() {
    const name = ref('');
    const greeting = ref('');

    // 监听 name 的变化
    watch(name, (newVal, oldVal) => {
      greeting.value = `Hello ${newVal}!`;
    });

    return {
      name,
      greeting,
    };
  },
});
</script>

在这个例子中，我们定义了一个 input 输入框，用来输入名字。我们将输入框的值绑定到了 name 变量上。当 name 变量发生变化时，我们通过 watch 监听器更新 greeting 变量的值，以显示一个问候语。

相关问题

vue中watch用法的实例

当在Vue中使用`watch`时，我们可以监视特定的数据变化，并在其发生变化时执行相应的操作。以下是一个示例：

假设我们有一个Vue组件，其中有一个数据属性`message`，我们想要在`message`发生变化时输出一条提示信息。

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
});

new Vue({
  el: '#app'
});

在上面的示例中，我们定义了一个`my-component`组件，并在其中定义了一个`watch`对象。该对象包含一个名为`message`的属性，它对应着`data`中的`message`属性。当`message`发生变化时，watch对象中定义的函数将被调用。

在控制台中运行以上代码，当我们修改`message`的值时，会在控制台输出类似以下内容的提示信息：

Message changed from Hello, Vue! to Hello, World!

这只是一个简单的示例，你可以根据需要在`watch`中执行更复杂的操作。

vue3 watch用法

Vue3中的watch API与Vue2中的watch API使用方式有所不同。Vue3中的watch API提供了两种使用方式：基于函数的watch和基于API的watch。

1. 基于函数的watch

基于函数的watch使用方式与Vue2中的watch API类似。需要在组件中使用$watch API，并传入一个函数作为watch的回调函数。当被监听的数据发生变化时，回调函数会被触发。

import { watch, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`count的值从${oldVal}变成了${newVal}`)
    })

    return {
      state
    }
  }
}

2. 基于API的watch

基于API的watch使用方式与基于函数的watch有所不同。需要调用组件实例的watch API，并传入被监听的数据和回调函数。

import { onMounted, watchEffect, ref } from 'vue'

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

    onMounted(() => {
      setInterval(() => {
        count.value++
      }, 1000)
    })

    watchEffect(() => {
      console.log(`count的值为${count.value}`)
    })

    return {
      count
    }
  }
}

基于API的watch还支持一些高级用法，如监听多个数据、设置监听的深度、设置监听的类型等，具体可以参考Vue3文档。