当前位置：首页 > article >正文

vue3入门教程：计算属性

article 2024/12/26 16:49:14

计算属性的基本用法

计算属性是通过computed函数创建的，它接受一个getter函数作为参数，并返回一个只读的响应式ref对象。该ref对象通过.value属性暴露getter函数的返回值。

<template>
  <div>
    <p>原始数据: {{ count }}</p>
    <p>计算属性: {{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

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

    const increment = () => {
      count.value++;
    };

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

在这个例子中，doubleCount是一个计算属性，它依赖于count变量。当count的值改变时，doubleCount的值会自动重新计算。

可写的计算属性

虽然计算属性默认是只读的，但你可以通过提供一个对象给computed函数，该对象包含get和set方法来创建一个可写的计算属性。

<template>
  <div>
    <p>姓名: {{ fullName }}</p>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

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

export default {
  setup() {
    const firstName = ref('张');
    const lastName = ref('三');

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

    const changeName = () => {
      fullName.value = '李 四';
    };

    return {
      fullName,
      changeName,
    };
  },
};
</script>

在这个例子中，fullName是一个可写的计算属性。当你修改fullName的值时，set方法会被调用，并更新firstName和lastName的值。

计算属性的调试

在开发环境中，你可以向computed函数传入第二个参数，该参数是一个对象，包含onTrack和onTrigger两个函数。这两个函数分别用于追踪计算属性的依赖和触发计算属性的重新计算。

<template>
  <div>
    <p>计数: {{ count }}</p>
    <p>双倍计数: {{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2, {
      onTrack(e) {
        console.log('计算属性追踪依赖:', e);
      },
      onTrigger(e) {
        console.log('计算属性触发更新:', e);
      },
    });

    const increment = () => {
      count.value++;
    };

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