Computed在Vue2、Vue3写法的不同

在 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 和 Vue 3 选项式 API：适合传统的项目或团队习惯于选项式 API 的开发者。
• Vue 3 组合式 API：适合逻辑复杂、需要重用代码的场景。
• Vue 3 setup 语法糖：推荐在 Vue 3 中使用，更简洁的写法，更易维护。

如果你已经在使用 Vue 3，建议优先考虑 <script setup> 语法糖来提升开发效率！