reactive

<template>
	<div @click="handleFun">{{state.data}}</div>
</template>


<script setup>
import {reactive} from 'vue';
const state = reactive({
	data : 1
})

const handleFun = ()=>{
	state.data = 2
}
</script>

ref

<template>
	<div @click="handleFun">{{state.data}}</div>
</template>


<script setup>
import {ref} from 'vue';
const state = ref({
	data : 1
})

const handleFun = ()=>{
	state.data.value = 2
}
</script>

Distinction

1. 使用上的区别

ref：修改值的时候必须加上.value。
reactive：不能改变对象本身，但可以改变内部count的值。

2. 如何选择

reactive和ref都是用来定义响应式数据的
reactive更推荐去定义复杂的数据类型
ref更推荐定义基本类型
ref和reactive本质我们可以简单的理解为ref是对reactive的二次包装
使用ref定义基本数据类型，ref也可以定义数组和对象。

实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。