当模板的数据需要依赖其它的状态,可以通过计算属性来处理。当创建计算值,可以通过computed函数。它接收一个getter函数,并为getter返回一个不可变的响应式ref对象。与vue2.x不同的是,在vue2.x是可以直接通过option api直接定义,而vue3需要手动导入。
<template>
<div>{{ plusOne }}</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
const count = ref(1)
const plusOne = computed(() => count.value + 1)
return {
plusOne
}
}
</script>
computed可以使用一个对象get和set函数来创建一个可写的ref对象。
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0