在Vue3中，计算属性是基于响应式依赖进行缓存的。与方法不同，计算属性是基于它们的响应式依赖进制缓存的。计算属性只有在相关依赖发生变化时才会重新求值。
- 基本使用
<template>
<div>{{ reversedMessage }}</div>
</template>
<script>
import { ref, computed } 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才会重新计算。
- 依赖多个响应式引用
<template>
<div>{{ fullName }}</div>
</template>
<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: (value) => {
const names = value.split(' ')
firstName.value = names[0]
lastName.value = names[names.length - 1]
}
})
return {
firstName,
lastName,
fullName
}
}
}
</script>
在这个例子中，fullName是一个可以读写的计算属性。它的get函数返回firstName和lastName的组合，而它的set函数接受一个新值，并更新firstName和lastName。
- 使用
watch监听计算属性的变化
<template>
<div>{{ fullName }}</div>
</template>
<script>
import { ref, computed, watch } 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]
}
})
watch(fullName, (newValue, oldValue) => {
console.log(`fullName changed from ${oldValue} to ${newValue}`)
})
return {
firstName,
lastName,
fullName
}
}
}
</script>
在这个例子中，我们使用watch来监听fullName的变化，当fullName变化时，会打印出一条消息。
以上就是Vue