在 Vue 3 的 Composition API 中，ref 和 computed 是处理响应式数据的核心工具。以下是一个简单示例，展示如何结合使用它们。

示例代码

<template>
  <div>
    <p>姓名：{{ fullName }}</p>
    <p>年龄：{{ age }}</p>
    <p>计算后的年龄：{{ computedAge }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const name = ref('张三')
const age = ref(25)

// 计算属性：fullName
const fullName = computed(() => {
  return name.value + '（使用 Composition API）'
})

// 响应式数据：computedAge
const computedAge = computed(() => {
  return age.value * 2
})
</script>

扩展知识

  • ref：用于创建响应式的数据属性，值可以是基本类型或对象。
  • computed：返回一个计算属性，基于响应式依赖自动更新。
  • 结合使用：通过 computed 可以创建依赖于 ref 的衍生数据，提升代码可读性和效率。

相关阅读

若需进一步了解 Composition API 的高级用法，可访问 Vue 3 Composition API 官方文档 进行学习。

vue3_composition_api