vue3组合式计算属性

在Vue3中，计算属性被改造成了一个组合式的API，使用时需要从Vue中引入，并在setup函数中进行配置。在Vue3中，计算属性仍然有两种写法，简写和全写。

简写的计算属性只有get方法，可以使用computed函数进行简写。例如，在setup函数中可以这样定义一个计算属性：

import { computed } from 'vue'

setup() {
  let fullName = computed(() => {
    // 计算属性的逻辑
    return // 计算结果
  })

  return {
    fullName
  }
}

全写的计算属性有get和set方法，可以使用computed函数的完整写法。例如，在setup函数中可以这样定义一个计算属性：

import { computed } from 'vue'

setup() {
  let fullName = computed({
    get() {
      // 计算属性的逻辑
      return // 计算结果
    },
    set(value) {
      // 设置计算属性的逻辑
    }
  })

  return {
    fullName
  }
}

以上是关于Vue3组合式计算属性的示例代码和使用方式。在模板中，可以通过双花括号的方式引用计算属性的值，或者通过v-model指令绑定计算属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue3的组合API——计算属性computed与监视watch](https://blog.csdn.net/mantou_riji/article/details/125963552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3中的计算属性](https://blog.csdn.net/m0_56219678/article/details/122846714)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]