这节课我们来一起学习计算属性使用组合API的写法，
首先我们也要把它导入
import { computed } from 'vue'
在vue3中，我们使用到的功能都是按需导入的，这样配合webpack的摇树treeShaking功能，可以减小最后项目的打包体积。
我们还是用例子来学习吧，比如我们有一个表示工作时长的数据叫time，它的值是8，表示打工人每天工作8个小时，
但是老板很不满意，于是要每天加班4小时，我们添加一个计算属性叫realTime，在time的基础上加4，表示实际工作时长
我们先定义正常工作时间长
const time = ref(8)
然后用计算属性定义实际工作时间长，我们导入的computed是一个方法，要给它传入一个函数，这个函数返回我们计算属性的值，最后computed返回的是一个ref响应式的对象，看代码更明白
const realTime = computed(() => {
return time.value + 4
})
这样就定义好了我们的realTime这个计算属性
全部代码
<template>
<div>打工人实际打工时长是{{ realTime }}小时</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
name: 'App',
setup() {
const time = ref(8)
const realTime = computed(() => {
return time.value + 4
})
return {
realTime,
}
},
}
</script>
显示结果是
computed方法返回的是一个ref对象，所以我们的realTime是一个ref对象，在js读取它的值时要加上.value
console.log(realTime.value)
不能改变它的值，不然会报错
realTime.value++ // 报错
当然计算属性所依赖的值也可以是reactive的数据，我们来写一个简单的例子
<template>
<div>{{ text }}</div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
name: 'App',
setup() {
const person = reactive({
name: '林哥',
age: 18,
})
const text = computed(() => {
return '我是' + person.name + '，今年' + person.age + '岁。'
})
return {
text,
}
},
}
</script>
显示结果
这就是计算属性的写法， 这节课就到这里了。
