Vue 3中的reactive：响应式对象和数组

在Vue 3中，reactive函数用于创建响应式对象。响应式对象是指其内部的数据在更改时能够触发视图的更新。

以下是一个简单的例子，展示如何在Vue 3中使用reactive函数：

import { reactive } from 'vue';
 
export default {
  setup() {
    // 创建响应式对象
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3!'
    });
 
    // 响应式函数，改变状态
    function increment() {
      state.count++;
    }
 
    // 返回响应式对象和函数供模板使用
    return {
      state,
      increment
    };
  }
};

在模板中使用这个响应式对象：

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

在这个例子中，当点击按钮时，increment函数会被调用，state.count会增加，并且由于state是响应式的，视图会自动更新显示新的计数值。