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

vue2 和 vue3 中 computer 计算属性的用法

news 来源：原创 2025/5/10 20:40:25

Vue 2 中的 `computed`

在 Vue 2 中，计算属性是响应式的，并且基于 getter 进行缓存，只有依赖的响应式数据发生变化时才会重新计算。

基本用法

<template>
  <div>
    <p>原始消息：{{ message }}</p>
    <p>反转消息：{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  computed: {
    // 计算属性
    reversedMessage() {
      return this.message.split("").reverse().join("");
    }
  }
};
</script>

特点：

计算属性 reversedMessage 依赖于 message，当 message 发生变化时，它会自动重新计算。
computed 具有缓存功能，只有在依赖的属性变更时才会重新计算，而不像 methods 每次调用都会执行。

计算属性的 Getter 和 Setter

计算属性默认只有 getter，但也可以定义 setter。

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(newValue) {
        const names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[1] || "";
      }
    }
  }
};
</script>

特点：

当读取 fullName 时，会调用 getter 返回拼接后的字符串。
当修改 fullName 时（例如 this.fullName = "Alice Smith"），会触发 setter 并更新 firstName 和 lastName。

Vue 3 中的 `computed`

在 Vue 3 中，除了 Options API 仍然可以使用 computed，Composition API 也提供了新的 computed 方法（从 vue 导入）。

Vue 3 Options API 用法（与 Vue 2 相同）

Vue 3 仍然支持 Vue 2 的 computed 写法：

<script>
export default {
  data() {
    return {
      message: "Hello Vue 3!"
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("");
    }
  }
};
</script>

Vue 3 Composition API 用法

Vue 3 允许使用 computed 来创建计算属性，而不是定义在 computed 选项中。

基本用法

<template>
  <div>
    <p>原始消息：{{ message }}</p>
    <p>反转消息：{{ reversedMessage }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref("Hello Vue 3!");

    const reversedMessage = computed(() => {
      return message.value.split("").reverse().join("");
    });

    return { message, reversedMessage };
  }
};
</script>

特点：

message 使用 ref 进行响应式声明。
computed(() => {}) 用于创建计算属性，返回的值是一个 ref，必须用 .value 访问其内部值。

计算属性的 Getter 和 Setter

Vue 3 的 computed 也支持 getter 和 setter，类似于 Vue 2：

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

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    const fullName = computed({
      get: () => `${firstName.value} ${lastName.value}`,
      set: (newValue) => {
        const names = newValue.split(" ");
        firstName.value = names[0];
        lastName.value = names[1] || "";
      }
    });

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

特点：

computed 传入对象，定义 get 和 set 方法。
set 方法允许修改 computed 值，并影响 ref 定义的 firstName 和 lastName。

Vue 2 vs Vue 3 `computed` 对比

特性	Vue 2	Vue 3
语法	`computed: { ... }`	`computed(() => {})`
依赖响应式	`this.data`	`ref()` 或 `reactive()`
Getter/Setter	`computed: { get() {}, set() {} }`	`computed({ get() {}, set() {} })`
需要 `this`	需要 `this`	无需 `this`
Composition API	❌	✅

总结

Vue 2 的 computed 定义在 computed 选项中，必须依赖 this 访问 data。
Vue 3 Options API 仍然支持 Vue 2 语法，但 Vue 3 主要推荐使用 Composition API。
Vue 3 Composition API 提供 computed 方法，使用 ref 或 reactive 作为依赖，不需要 this，更灵活可组合。
计算属性支持 getter 和 setter，可以用来双向绑定数据。