在Vue3中，计算属性(computed properties)是依赖于响应式数据进行的值的封装。计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。
- 基本用法
<template>
<div>{{ reversedMessage }}</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
setup() {
const message = ref('Hello');
const reversedMessage = computed(() => message.value.split('').reverse().join(''));
return {
message,
reversedMessage
};
}
};
</script>
在这个例子中，reversedMessage是一个计算属性，它的返回值取决于message的值。当message改变时，reversedMessage会自动更新。
- 设置setter
计算属性默认只有getter，但你也可以提供一个setter来使计算属性变为可响应。
<template>
<div>{{ fullName }}</div>
<button @click="fullName = 'John Doe'">Change Name</button>
</template>
<script>
import { computed, ref } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
get: () => firstName.value + ' ' + lastName.value,
set: (value) => {
const names = value.split(' ');
firstName.value = names[0];
lastName.value = names[names.length - 1];
}
});
return {
firstName,
lastName,
fullName
};
}
};
</script>
在这个例子中，fullName既有getter也有setter，当你点击按钮改变fullName的值时，它会自动把这个新值分割成firstName和lastName。
- 使用computed的getter和setter函数
你也可以使用函数的形式来定义getter和setter。
<template>
<div>{{ fullName }}</div>
<button @click="changeName('John', 'Doe')">Change Name</button>
</template>
<script>
import { computed, ref } from 'vue';
export default {
setup() {
const firstName = ref('');
const lastName = ref('');
const fullName = computed({
get: () => firstName.value + ' ' + lastName.value,
set: (first, last) => {
firstName.value = first;
lastName.value = last;
}
});
function changeName(first, last) {
fullName.value = first + ' ' + last;
}
return {
fullName,
changeName
};
}
};
</script>
在这个例子中，changeName函数接受first和last两个参数，然后通过设置fullName来改变firstName和lastName的值。
- 使用watchEffect和watch来响应计算属性的变化
<template>
<div>{{ computedValue }}</div>
</template>
<script>
import { computed, ref, watchEffect, watch } from 'vue';
export default {
setup() {
const value = ref(0);
const computedValue =