vue3响应式变量ref和reactive区别

ref 和 reactive 是 Vue 3 中用于创建响应式数据的 API
那么我们何时使用，我通过创建，访问，更新以及配合v-model使用来说明两者区别：

• 创建：
  ref 用来创建一个响应式的基本数据类型（如数字、字符串、布尔值等），而
  reactive 可以用来创建一个响应式的对象类型（如对象、数组等）。
• 访问
  ref创建的包装对象需要使用 .value 属性来获取或修改值。
  reactive 创建的是一个响应式对象，可以直接访问和修改对象内部的属性。
• 更新
  ref 创建的是一个单一的值，因此无论何时所读取的值都是最新的值。
  访问 reactive 对象时，只有在访问到对象的属性时才会触发更新。
• 配合v-model
  ref 可以与模板中的 v-model 指令一起使用
  reactive 不支持 v-model 指令。

放个例子

<template>
  <div>
    <p>count: {{ count.value }}</p>
    <button @click="increment">Increment</button>
    <p>person: {{ person.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const count = ref(0);
const person = reactive({
  name: 'AAA',
  age: 18,
});

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

function updateName() {
  person.name = 'BBB';
}
</script>