Vue3侦听器：掌握数据响应性和生命周期

2024-01-31 11:44:01

Vue3侦听器：深入解析其类型、用法和最佳实践

在构建交互式且响应迅速的Vue3应用程序时，侦听器是不可或缺的工具。本文将深入探讨Vue3侦听器的类型、语法和最佳实践，以帮助您充分利用它们。

组合式API侦听器

组合式API引入了三种侦听器：

1. watch()

watch()侦听特定的响应式属性，并在其值发生更改时执行回调函数。它用于监控单一属性的变化。

import { ref, watch } from "vue";

const count = ref(0);

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

2. watchEffect()

watchEffect()类似于watch(), 但它在组件整个生命周期中持续运行，而不受响应式属性更改的触发。

import { ref, watchEffect } from "vue";

const count = ref(0);

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

3. watchPostEffect()

watchPostEffect()也与watchEffect()类似，但它在每次响应式更新后才执行回调函数，适用于需要延迟执行效果的情况。

import { ref, watchPostEffect } from "vue";

const count = ref(0);

watchPostEffect(() => {
  console.log(`Count is now ${count.value}`);
});

选项式API侦听器

选项式API提供了两种侦听器：

1. watch选项

watch选项是一个组件选项，用于侦听多个响应式属性。

export default {
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
}

2. this.$watch()方法

this.$watch()方法可用于在组件实例中侦听特定的响应式属性。

export default {
  mounted() {
    this.$watch("count", (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });
  }
}