vue3使用computed值

在Vue3中，使用计算属性computed的方式有两种形式：简写形式和完整形式。

简写形式是只读的，只能获取计算属性的值，无法修改依赖值。在模板中，可以直接使用计算属性的名称来获取其值。

完整形式的计算属性可以同时包含get和set方法。get方法用于获取计算属性的值，set方法用于修改依赖值。在模板中，可以通过v-model指令来绑定完整形式的计算属性，实现双向数据绑定。

以下是使用计算属性的示例代码：

<template>
  <div>
    <div>姓：<input type="text" v-model="per.surname"></div>
    <div>名：<input type="text" v-model="per.name"></div>
    <div>姓名：<input type="text" v-model="per.fullName"></div>
  </div>
</template>

<script>
import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    per.fullName = computed(() => {
      return per.surname + ' ' + per.name
    })

    return { per }
  }
}
</script>

<style>
</style>

在上述代码中，我们使用了Vue3的`reactive`函数来创建响应式对象`per`，并定义了`surname`和`name`两个属性。然后，我们使用`computed`函数创建了计算属性`fullName`，通过箭头函数返回了`surname`和`name`的拼接结果。最后，将`per`对象返回给模板。