Vue3中的 computed,watch,watchEffect的使用方法

下面就为大家详细讲解一下“Vue3中的 computed,watch,watchEffect的使用方法”的完整攻略。

computed的使用方法

computed是Vue3中的计算属性，其内部的值是另一个属性的计算结果。在Vue3中，我们可以通过computed()来创建计算属性。

在Vue3中，计算属性默认以getter函数的形式存在，表示计算属性所依赖的值发生变化时会触发计算属性。但是，当计算属性的依赖发生变化时，Vue3在运行时会根据需要自动更新计算属性的值，并且只会在依赖发生变化时才会重新计算。

下面是一个简单的示例，演示如何使用computed()创建计算属性：

<template>
  <div>
    <input type="number" v-model="a">
    <input type="number" v-model="b">
    <p>计算出来的总和为：{{ total }}</p>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  setup() {
    const a = ref(0);
    const b = ref(0);
    const total = computed(() => {
      return a.value + b.value;
    });

    return {
      a,
      b,
      total,
    };
  },
};
</script>

在上面的示例中，我们使用了Vue3提供的computed()函数来创建了一个计算属性total，它是a与b的和。这里计算属性total的值会随着a和b的值变化而自动更新，无需手动调用。

watch的使用方法

watch是Vue3中的监听器，我们可以使用它来监听某个属性值的变化，并在变化后执行某个操作。在Vue3中，我们可以通过watch()来创建监听器。

watch()函数有两个参数，第一个参数是需要监听的属性，第二个参数是回调函数。当监听的属性发生变化时，watch()会自动执行回调函数。

下面是一个简单的示例，演示如何使用watch()创建监听器：

<template>
  <div>
    <input v-model="firstName" placeholder="请输入您的姓">
    <input v-model="lastName" placeholder="请输入您的名">
    <p>您的姓名是：{{ fullName }}</p>
  </div>
</template>

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

export default {
  setup() {
    const data = reactive({
      firstName: '',
      lastName: '',
    });

    const fullName = computed(() => {
      return `${data.firstName} ${data.lastName}`;
    });

    watch(() => data.firstName, (newValue, oldValue) => {
      console.log(`您的姓已经从${oldValue}改为了${newValue}`);
    });

    return {
      firstName: data.firstName,
      lastName: data.lastName,
      fullName,
    };
  },
};
</script>

在上面的示例中，我们使用了Vue3提供的watch()函数来创建了一个监听器，用于监听姓的变化。当姓发生变化时，watch会执行回调函数，并输出姓的变化情况。

watchEffect的使用方法

watchEffect是Vue3中的副作用函数，我们可以使用它来监听变量的变化，并在变化后执行某个操作。在Vue3中，我们可以使用watchEffect()来创建副作用函数。

watchEffect()函数有一个回调函数参数，当内部的数据发生变化时，回调函数会被触发执行。watchEffect函数内部自动收集其所依赖的响应式数据，并响应式的执行传入的回调函数。

下面是一个简单的示例，演示如何使用watchEffect()创建副作用函数：

<template>
  <div>
    <p>当前时间是{{ date }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const date = ref(new Date());
    watchEffect(() => {
      setInterval(() => {
        date.value = new Date();
      }, 1000);
    });

    return {
      date,
    };
  },
};
</script>

在上面的示例中，我们使用了watchEffect()函数来创建了一个副作用函数，用来动态展示当前日期和时间。watchEffect内部自动收集依赖，并根据依赖实现动态更新。当我们改变时间时，副作用函数会自动执行，展示最新的时间。

至此，我们已经为大家详细讲解了Vue3中的computed,watch,watchEffect的使用方法，希望能对大家有所帮助。