Vue3 如何读取数据

在 Vue3 的项目开发中，读取数据是一项基础且关键的操作。它为构建动态、交互性强的用户界面提供了必要的数据支持。下面将详细介绍几种常见的读取数据方式。

首先是使用 data 函数。在 Vue3 组件中，data 函数返回一个对象，这个对象中的属性就是组件的响应式数据。例如：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue3!');
</script>

这里通过 ref 函数创建了一个响应式数据 message，在模板中可以直接使用双花括号语法来显示该数据。

除了 ref，Vue3 还提供了 reactive 函数来创建响应式对象。reactive 适用于处理复杂的数据结构。示例如下：

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});
</script>

上述代码中，reactive 创建了一个包含 name 和 age 属性的响应式对象 user，在模板中顺利读取并展示了对象的属性值。

Vue3 中的计算属性也是读取数据的重要方式。计算属性通过 computed 函数定义，它基于已有数据进行计算得出新的值，并且具有缓存机制，只有依赖的数据发生变化时才会重新计算。比如：

<template>
  <div>{{ reversedMessage }}</div>
</template>

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

const message = ref('Hello');
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});
</script>

在这个例子里，reversedMessage 是一个计算属性，它将 message 的值进行反转。

在 Vue3 中还可以通过生命周期钩子函数来读取数据。例如 onMounted 钩子函数，在组件挂载完成后执行，可以在此处发起 API 请求获取数据。示例代码如下：

<template>
  <div>{{ fetchedData }}</div>
</template>

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

const fetchedData = ref('');

const fetchData = async () => {
  // 模拟 API 请求
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  fetchedData.value = data;
};

onMounted(() => {
  fetchData();
});
</script>

通过上述多种方式，开发者可以根据项目的具体需求灵活选择合适的方法来读取数据，为构建高效、稳定的 Vue3 应用程序打下坚实的基础。