Vue3 中利用 ref 与 reactive 创建响应式对象的示例代码

在 Vue3 中，ref 和 reactive 是创建响应式对象的重要工具，它们使得数据的变化能够自动驱动视图的更新。下面通过示例代码来详细了解它们的使用。

引入必要的模块：

import { ref, reactive } from 'vue';

使用 ref 创建简单的响应式变量：

const count = ref(0);

function increment() {
  count.value++;
}

在上述代码中，count 是一个使用 ref 创建的响应式变量。通过 count.value 来访问和修改其值。

接下来，使用 reactive 创建复杂的响应式对象：

const user = reactive({
  name: 'John Doe',
  age: 25
});

function updateUser() {
  user.name = 'Jane Doe';
  user.age = 30;
}

reactive 适用于处理包含多个属性的对象，直接修改对象的属性即可触发响应。

在模板中，可以这样使用：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>

    <p>User Name: {{ user.name }}</p>
    <p>User Age: {{ user.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>
</template>

通过以上示例，我们可以清晰地看到 ref 适用于基本类型的响应式数据，而 reactive 更适合处理复杂的对象数据。

在实际开发中，根据具体的场景选择合适的方式创建响应式对象，可以提高代码的可读性和可维护性。合理地运用响应式机制，能够极大地提升应用的性能和用户体验。

熟练掌握 ref 和 reactive 的使用，是构建高效 Vue3 应用的重要基础。不断实践和探索，能够让我们更好地发挥 Vue3 的强大功能，开发出更加出色的应用程序。