Computed在Vue2、Vue3写法的不同

news2025/1/6 22:44:41

在 Vue 2 和 Vue 3 中，computed 的写法有一些区别，特别是在 Vue 3 中新增了组合式 API 和 setup 语法糖。以下是不同写法的详细比较：

1. Vue 2 选项式 API

写法

在 Vue 2 中，computed 是一个选项，直接在 computed 对象中定义计算属性。

new Vue({
  el: "#app",
  data() {
    return {
      firstName: "John",
      lastName: "Doe",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
});

特点

使用 this 访问 data 和其他属性。
computed 属性会缓存结果，只有依赖发生变化时才会重新计算。

2. Vue 3 选项式 API

写法

Vue 3 选项式 API 的写法和 Vue 2 是一致的，只是组件定义的方式可以用 createApp。

import { createApp } from "vue";

createApp({
  data() {
    return {
      firstName: "John",
      lastName: "Doe",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
}).mount("#app");

特点

沿用了 Vue 2 的写法，但可以与 Vue 3 的组合式 API 一起使用。

3. Vue 3 组合式 API

在组合式 API 中，computed 是从 Vue 的核心模块中引入的函数，直接在 setup 中使用。

写法

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

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

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

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

特点

需要使用 ref 或 reactive 来定义响应式数据。
computed 返回的是一个响应式的计算结果。
访问时需要 .value。

4. Vue 3 setup 语法糖

Vue 3 的 <script setup> 语法糖极大简化了组合式 API 的写法，无需显式 return。

写法

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

const firstName = ref("John");
const lastName = ref("Doe");

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

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

特点

数据、计算属性和方法都自动暴露到模板中，无需 return。
更简洁、清晰，适合小型组件或需要频繁使用组合式 API 的场景。

对比总结

特性	Vue 2 选项式 API	Vue 3 选项式 API	Vue 3 组合式 API	Vue 3 setup 语法糖
写法	`computed` 对象定义	类似 Vue 2	使用 `computed` 函数	使用 `computed` 函数
数据访问方式	`this.data`	`this.data`	`ref.value` 或解构	自动暴露，无需解构
响应式支持	内置支持	内置支持	`ref` 或 `reactive`	`ref` 或 `reactive`
代码简洁性	中等	中等	中等	最简洁