Vue 中 reactive 使用方法

在 Vue 开发中，reactive 是一个极为重要的响应式 API，它能帮助开发者轻松实现数据的响应式更新，让视图与数据保持实时同步。

要使用 reactive，需从 vue 中导入它。基本语法很简单：import { reactive } from 'vue'; const state = reactive({ /* 数据对象 */ });。通过 reactive 包裹一个普通的 JavaScript 对象，这个对象就会变成响应式数据。

例如，创建一个包含基本数据类型的响应式对象：

import { reactive } from 'vue';
const state = reactive({
  count: 0,
  message: 'Hello Vue'
});

在模板中可以直接使用这些响应式数据：

<template>
  <div>
    <p>{{ state.count }}</p>
    <p>{{ state.message }}</p>
  </div>
</template>

当数据发生变化时，Vue 会自动检测到并更新与之绑定的 DOM 元素。

对于复杂的数据结构，如嵌套对象或数组，reactive 同样适用。比如有一个包含数组和嵌套对象的响应式数据：

const state = reactive({
  list: [1, 2, 3],
  person: {
    name: 'John',
    age: 30
  }
});

修改数组元素或嵌套对象的属性，Vue 也能正确响应。不过在操作数组时，直接通过索引修改元素可能不会触发响应式更新，推荐使用数组的变异方法，如 push、pop、splice 等。例如：

state.list.push(4);
state.person.age++;

在组件中使用 reactive 时，要注意它的作用域。如果在一个函数内部创建了 reactive 数据，要确保该数据在函数外部也能被正确访问和更新。

另外，reactive 创建的是一个 Proxy 对象，与原始对象有所不同。在某些场景下，可能需要将其转换为普通对象，可以使用 toRaw 方法。

reactive 是 Vue 响应式系统的核心 API 之一。熟练掌握它的使用方法，能够让开发者更高效地构建数据驱动的用户界面，提升开发效率和应用的性能。无论是简单的数据展示还是复杂的业务逻辑处理，reactive 都能发挥重要作用。