Vue3 计算属性的用法详解

在Vue.js中，我们可以使用计算属性来生成新的响应式数据，这些数据可以在模板中使用，以下是Vue3计算属性使用的详细攻略。

计算属性的基本用法

Vue3中的计算属性可以通过 computed API来定义，并返回一个新的响应式数据。

计算属性一般用于对数据进行过滤和计算，我们可以将带有复杂逻辑的表达式放在计算属性中，以便在模板中更方便地使用。

以下是一个简单的计算属性示例：

<template>
  <div>
    <p>原数：{{ num }}</p>
    <p>计算后的数：{{ computedNum }}</p>
  </div>
</template>

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

export default {
  setup() {
    const num = 2;

    const computedNum = computed(() => {
      return num * 2;
    });

    return {
      num,
      computedNum,
    };
  },
};
</script>

在上面的示例中，我们定义了一个计算属性computedNum，该计算属性对原始数据num进行计算，并返回一个新的响应式数据，这个计算属性的值将显示在模板中。

计算属性的高级用法

在Vue3中，我们可以根据需要，使用计算属性的高级用法来满足我们的需求。

get 和 set

在Vue3中，我们可以通过get和set定义计算属性。

get回调函数会在读取计算属性的值时执行，set回调函数会在设置计算属性的值时执行。

以下示例展示了如何使用get和set定义计算属性。

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName" />
    <input v-model="lastName" />
  </div>
</template>

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

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

    const fullName = computed({
      get() {
        return state.firstName + ' ' + state.lastName;
      },
      set(value) {
        const [firstName, lastName] = value.split(' ');
        state.firstName = firstName;
        state.lastName = lastName;
      },
    });

    return {
      fullName,
      ...state,
    };
  },
};
</script>

在上面的示例中，我们定义了一个计算属性fullName，当我们读取fullName时，get回调函数会将firstName和lastName连接起来，返回一个新的响应式数据。

当我们设置fullName时，set回调函数会将fullName解构为firstName和lastName，并将它们分别设置到state变量上。

计算属性的依赖

当计算属性使用到了响应式数据时，这些数据就会成为计算属性的依赖，当这些依赖的值发生变化时，计算属性的值也会跟着发生变化。Vue3通过依赖收集的方式来自动更新计算属性。

以下示例展示了如何让计算属性具备依赖：

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName" />
    <input v-model="lastName" />
  </div>
</template>

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

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

    const fullName = computed(() => {
      return state.firstName + ' ' + state.lastName;
    });

    return {
      fullName,
      ...state,
    };
  },
};
</script>

在上面的示例中，计算属性fullName依赖于响应式数据state.firstName和state.lastName，当这两个数据的值发生变化时，fullName也会随之更新。

总结

Vue3中的计算属性能够方便地对数据进行过滤和计算，并在模板中使用，我们可以使用get和set定义计算属性，也可以根据需要让计算属性具备依赖，以便自动更新计算属性的值。

以上是关于Vue3计算属性的用法详解。