vue3中ref和reactive的区别？

---

区别

1. ref和reactive区别:
   如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value
   如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value
2. Vue是如何决定是否需要自动添加.value的
   Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,
   如果是就自动添加.value, 如果不是就不自动添加.value
3. Vue是如何判断当前的数据是否是ref类型的
   通过当前数据的__v_ref来判断的
   如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

数据是ref类型

<template>
  <div>
    <p>{
    
    {
    
     age }}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
import {
    
     ref } from "vue";
export default {
    
    
  name: "App",
  setup() {
    
    
    // ref类型在底层会自动转换成reactive类型
    // ref(18) -> reactive({value: 18})
    let age = ref(18);
 
    function Fn() {
    
    
      age.value = 666;
　　　　console.log(age)
    }
    return {
    
     age, Fn };
  },
};
</script>

数据是reactive类型

<template>
  <div>
    <p>{
    
    {
    
    age}}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
 
import {
    
    reactive} from 'vue';
 
export default {
    
    
  name: 'App',
  setup() {
    
    
    let age = reactive({
    
    value: 18});
    function Fn() {
    
    
        age.value = 666;
　　 	console.log(age)
    }
    return {
    
    age, Fn}
  }
}
</script>

我们如何判断数据到底是ref还是reactive?

通过isRef / isReactive 方法

<template>
  <div>
    <p>{
    
    {
    
    age}}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
import {
    
    reactive} from 'vue';
export default {
    
    
  name: 'App',
  setup() {
    
    
    let age = reactive({
    
    value: 18});
    function Fn() {
    
    
       console.log(isRef(age)); //false
       console.log(isReactive(age));  //true
       age.value = 666;
    }
    return {
    
    age, Fn}
  }
}
</script>