vue3에서 ref와 reactive의 차이점은 무엇입니까?

---

차이점

1. ref와 reactive의 차이점:
   ref 유형의 데이터가 템플릿에서 사용되는 경우 Vue는 자동으로 .value를 추가합니다
   . 우리를
2. Vue는 .value 를 자동으로 추가할지
   여부를 어떻게 결정하나요?
   
3. Vue는 현재 데이터가 ref 타입인지 어떻게 판단하나요
   현재 데이터의 __v_ref로 판단 이
   private 속성이 있고 값이 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>

데이터는 반응형입니다.

<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>

데이터가 참조인지 반응인지 어떻게 판단합니까?

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>