[vue3新特性] 4.组合api——5.计算属性

这节课我们来一起学习计算属性使用组合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>

显示结果

这就是计算属性的写法， 这节课就到这里了。