vue3 ref和reactive的区别与相同

先说区别，如果在模板中直接使用ref定义的数据，不必加上.value，因为在模板中使用ref定义的值已经暴露出来了，但是使用reacative定义的必须要加上定义的对象名字，比如定义了const data=reactive({name:"cat"})，那么在模板中使用必须是data.cat。这是第一个区别。

第二个就是reactive一般是存放数组或者对象，它能够将复杂的类型变成响应式的数据，ref存放的一般是基本数据，而且reactive的响应式是深层次的。

相同点：这两个都是通过Es6的代理proxy进行实现的响应式，ref本质上是reactive的子，

下面是一些例子，能够更更好的理解我所说的

<template>
	<h1>{
   
   { name }}</h1>
</template>

<script setup> 
import { ref} from 'vue'
const name=ref("cat")
</script>
//在模板中直接使用即可，vue会自动帮我们加上.value
如果ref的value接收的是一个对象，那么vue会直接将ref转化为reactive

<template>
	<h1>{
   
   { data.name }}</h1>
</template>

<script setup>
import { ref,reactive} from 'vue'
const data=reactive({
        name:"cat"
})
</script>
//使用reactive定义变量一定要加上变量名，类似于对象使用点表明对象

那么应该如何判断数据是ref或者是reactive类型呢？vue给我们提供了isRef / isReactive 方法

<template>
  <div>
    <p>{
   
   {data.name}}</p>
  </div>
</template>
 
<script>
 
  import {reactive，ref} from 'vue';
    let data= reactive({name: "cat"});
    function Fn() {
       console.log(isRef(data.name)); //false
       console.log(isReactive(data.name));  //true
    }
}
</script>