Vue3侦听器使用

xiaoyu 2019-02-14 ⋅ 24 阅读

在Vue3中,侦听器(watcher)是用于监视数据变化并执行相应操作的一种机制。它们可以帮助我们实现响应式编程,使得组件能够自动更新以反映数据的变化。以下是如何在Vue3中使用侦听器的简要说明:

  1. 首先,我们需要在组件的setup函数中定义一个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,
    };
  },
};
  1. 在上面的例子中,我们使用ref函数创建了一个响应式的count变量,并将其传递给watch函数。当count的值发生变化时,我们的回调函数将被调用,并打印出旧值和新值。

  2. 我们还可以在watch函数中添加第二个参数,它是一个可选的配置对象。这个对象可以包含以下属性:

    • immediate: 布尔值,表示是否立即执行回调函数。默认为false
    • deep: 布尔值,表示是否深度监听对象的属性。默认为false
    • sync: 布尔值,表示是否同步执行回调函数。默认为false
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
}, { immediate: true, deep: true });
  1. 最后,我们可以在模板中使用插值表达式或方法来访问和修改响应式数据。例如:
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>


import { ref, watch } from 'vue';

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

    function increment() {
      count.value++;
    }

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

    return {
      count,
      increment,
    };
  },
};

在这个例子中,我们在模板中显示了count的值,并添加了一个按钮来触发increment方法。当点击按钮时,count的值将增加,同时侦听器将捕获到这个变化并执行相应的回调函数。


全部评论: 0

    我有话说: