Vue3侦听器怎么应用

在Vue3中，侦听器（Watcher）是一种非常重要的机制，用于监听数据的变化并执行相应的操作。Vue3的侦听器与Vue2相比有了很大的改进，提供了更灵活和强大的功能。本文将详细介绍Vue3侦听器的应用。

1. 基本用法

在Vue3中，可以使用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函数监听它的变化。当count的值发生变化时，回调函数会被触发，并打印出变化前后的值。

2. 监听多个数据源

Vue3的watch函数还支持监听多个数据源。你可以将多个数据源放在一个数组中传递给watch函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Vue');

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count changed from ${oldCount} to ${newCount}`);
      console.log(`name changed from ${oldName} to ${newName}`);
    });

    return {
      count,
      name
    };
  }
};

在这个例子中，我们同时监听count和name两个数据源。当其中任何一个数据源发生变化时，回调函数都会被触发。

3. 深度监听

默认情况下，watch函数只会监听数据源的浅层变化。如果你需要监听对象或数组内部的变化，可以使用deep选项。

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Vue',
      age: 3
    });

    watch(user, (newValue, oldValue) => {
      console.log('user changed', newValue);
    }, { deep: true });

    return {
      user
    };
  }
};

在这个例子中，我们使用deep: true选项来深度监听user对象的变化。当user对象的任何属性发生变化时，回调函数都会被触发。

4. 立即执行

有时候，你可能希望在侦听器创建时立即执行一次回调函数。这时可以使用immediate选项。

import { ref, watch } from 'vue';

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

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

    return {
      count
    };
  }
};

在这个例子中，immediate: true选项使得回调函数在侦听器创建时立即执行一次。

5. 停止侦听器

在某些情况下，你可能需要手动停止一个侦听器。Vue3的watch函数返回一个停止函数，调用这个函数可以停止侦听器。

import { ref, watch } from 'vue';

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

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

    // 停止侦听器
    stopWatch();

    return {
      count
    };
  }
};

在这个例子中，我们调用stopWatch函数来停止侦听器。

6. 使用watchEffect

除了watch函数，Vue3还提供了watchEffect函数。watchEffect会自动追踪其内部使用的响应式数据，并在这些数据发生变化时重新执行。

import { ref, watchEffect } from 'vue';

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

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

    return {
      count
    };
  }
};

在这个例子中，watchEffect会自动追踪count的变化，并在count发生变化时重新执行回调函数。

7. 总结

Vue3的侦听器提供了非常灵活和强大的功能，能够满足各种复杂的监听需求。通过watch和watchEffect函数，你可以轻松地监听数据的变化，并在变化时执行相应的操作。希望本文能帮助你更好地理解和应用Vue3的侦听器。