博客站

在 Vue 3 中，computed 是用于创建计算属性的工具。计算属性是基于响应式数据派生出的值，当依赖的响应式数据发生变化时，计算属性会自动更新。以下是使用 computed 创建计算属性的详细步骤和示例：

1. 引入 computed

首先，你需要在 Vue 组件中引入 computed 函数。

import { computed } from 'vue';

2. 创建计算属性

使用 computed 函数创建一个计算属性。computed 接收一个函数作为参数，该函数返回计算属性的值。

const count = ref(0);
const doubled = computed(() => count.value * 2);

3. 访问计算属性

计算属性是一个只读的 ref 对象，通过 .value 属性访问其值。

console.log(doubled.value); // 访问计算属性

4. 在模板中使用

在模板中，Vue 会自动解包 computed 的 .value 属性，因此你可以直接使用计算属性。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

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

    return {
      count,
      doubled,
      increment
    };
  }
};
</script>

5. 在组合式 API 中使用

在组合式 API 中，computed 通常用于在 setup 函数中创建计算属性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

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

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

6. 在 <script setup> 语法中使用

如果你使用 <script setup> 语法，可以更简洁地使用 computed。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);
const doubled = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

7. 处理复杂计算

计算属性可以基于多个响应式数据进行复杂的计算。

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

console.log(fullName.value); // 输出: John Doe

8. 在模板中使用复杂计算

在模板中，你可以直接使用基于多个响应式数据的计算属性。

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

9. 可写的计算属性

虽然计算属性通常是只读的，但你也可以创建一个可写的计算属性，通过提供一个包含 get 和 set 函数的对象。

const count = ref(0);
const doubled = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

doubled.value = 8; // 设置计算属性的值
console.log(count.value); // 输出: 4

10. 在模板中使用可写的计算属性

在模板中，你可以直接使用可写的计算属性。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
    <button @click="setDoubled">Set Doubled to 8</button>
  </div>
</template>

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

const count = ref(0);
const doubled = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

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

function setDoubled() {
  doubled.value = 8;
}
</script>

总结

• 使用 computed 创建计算属性时，传入一个函数返回计算属性的值。
• 计算属性是一个只读的 ref 对象，通过 .value 属性访问其值。
• 在模板中，Vue 会自动解包 computed 的 .value 属性，因此可以直接使用计算属性。
• 计算属性可以基于多个响应式数据进行复杂的计算。
• 可以创建可写的计算属性，通过提供一个包含 get 和 set 函数的对象。
• 在组合式 API 和 <script setup> 语法中，computed 是创建计算属性的常用工具。