在Vue3中，ref和reactive区别

在Vue3中，ref和reactive都是响应式数据的实现方式，但它们的用法和作用略有不同：

1. ref是Vue3中专门用于创建单个可变数据的API，它将任何类型的数据包装成一个响应式对象，可以通过.value访问数据本身。例如，const count = ref(0)创建一个响应式对象count，它的值为0。在组件中，可以直接使用count来获取它的值，也可以使用count.value来访问它的值。ref的使用场景通常是创建一个简单的、可变的数据。

2. reactive是Vue3中用于创建包含多个属性的响应式对象的API，它将普通的Javascript对象转换成一个响应式对象，可以通过.来访问对象的属性。例如，const state = reactive({ count: 0 })创建一个响应式对象state，它包含一个属性count，值为0。在组件中，可以直接使用state.count来访问count属性的值。reactive的使用场景通常是创建一个复杂的、包含多个属性的数据。

综上所述，ref适用于创建单个可变数据，而reactive适用于创建包含多个属性的可变数据。在使用时，需要根据实际情况选择合适的API。此外，需要注意的是，在使用ref或reactive创建响应式对象后，需要使用.value或.来访问数据本身或属性值，否则将无法触发响应式更新。

面是一个使用ref和reactive的简单例子，用于说明它们的使用方法和作用：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">+1</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用ref创建可变数据
    const count = ref(0);

    // 使用reactive创建包含多个属性的可变数据
    const state = reactive({
      title: 'Vue3',
      count: count.value,
    });

    // 定义增加计数器的方法
    const incrementCount = () => {
      count.value++;
      state.count = count.value;
    };

    // 将响应式数据暴露出去
    return {
      count,
      title: state.title,
      incrementCount,
    };
  },
};
</script>

在上述代码中，通过使用ref和reactive创建了两个响应式对象：count和state。其中，count是一个单个可变数据，用于存储计数器的值；state是一个包含多个属性的可变数据，用于存储标题和计数器的值。

在setup函数中，定义了一个增加计数器的方法incrementCount，该方法通过修改count.value的值来增加计数器的值，并将新的计数器值赋给state.count属性。在组件的模板中，分别使用了count和state.title、state.count来显示计数器的值和标题。当用户点击+1按钮时，会调用incrementCount方法来增加计数器的值，并更新页面上的计数器显示。