在 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 |
| 代码简洁性 | 中等 | 中等 | 中等 | 最简洁 |
推荐使用场景
- Vue 2 和 Vue 3 选项式 API：适合传统的项目或团队习惯于选项式 API 的开发者。
- Vue 3 组合式 API：适合逻辑复杂、需要重用代码的场景。
- Vue 3 setup 语法糖：推荐在 Vue 3 中使用，更简洁的写法，更易维护。
如果你已经在使用 Vue 3，建议优先考虑 <script setup> 语法糖来提升开发效率！
