Detailed analysis of the difference between Ref and Reactive in Vue3.0

<!-- Template syntax> 
<template>
   <div>{{state}}</div>
</template> 
//js script setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}

<!-- Template syntax> 
<template>
   <div>{{state.name}}</div>
</template> 
//js script setup(){
     let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}

 var state = shallowReactive({
    a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 state.a = '1'
 //Changing the first layer of data will cause the page to be re-rendered //state => Proxy {a:"a",gf:{...}}
//If you don't change the first layer and only change other data, the page will not be re-rendered, for example, state.gf.b = 2

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.a = 1
/*
It cannot be re-rendered. The principle of shallowRef is also created through shallowReactive({value:{}}). You need to modify the value to re-render*/
state.value = {
    a:'1',
    gf:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.gf.fsd = 4
triggerRef(state)

var obj = {name:'test'}
var state = reactive(obj)
var obj2 = toRaw(state)
obj2.name = 'zs' // does not cause the page to render----
//If it is created with ref, then get the value var obj = {name:'test'}
var state = ref(obj)
var obj2 = toRaw(state.value)

var obj = {name:'test'}
obj = markRaw(obj)
var state = reactive(obj)
state.name = 'zs' // Data page cannot be modified and will not be modified

var obj = {name:'test'}
var state = ref(obj.name)
state.name = 'zs' //At this time, the name attribute value of obj will not change, and the UI will be automatically updated///
var obj = {name:'test'}
var state = toRef(obj,'name') //Only one attribute value can be set state.name = 'zs' //The name attribute value in obj will change, but the UI will not be updated

var obj = {name:'test',age:16}
var state = toRefs(obj)
state.name.value = 'zs' //The property value of obj's name will also change, but the UI will not be updated state.age.value = 18 //The property value of obj's age will also change, but the UI will not be updated

function myRef(value){
   /*
    The customRef function returns an object with two methods, get/set. The get method can be accessed when the created object obtains data, and the set method will be triggered when the created object modifies the value. The customRef function has two parameters, track/trigger. The track parameter means tracking. It is called in the get method to track data changes at any time. The trigger parameter is used to trigger the response. The set method can be called to update the UI interface*/
    return customRef((track,trigger)=>{
       return {
          get(){
             track()//tracking data return value     
          },
          set(newVal){
             value = newVal
             trigger()//Update UI interface}
       }
    })

}

setup(){
   var age = myRef(18)
   age.value = 20
}

<template>
   <div ref="box"></div>

</template>
import {ref,onMounted} from 'vue'
/*
 The setup method is called between beforeCreate and created in the life cycle*/
<script>
   setup(){
      var box = ref(null)
      onMounted(()=>{
         console.log('onMounted',box.value)
      })
      console.log(box.value)
      return {box}

   }

</script>