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

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	❌	✅

---

总结

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

Vue 3 的 Composition API 让 computed 变得更简洁、模块化，特别适用于组合逻辑复杂的应用场景。