Vue3.0 における Ref と Reactive の違いの詳細な分析

<!-- テンプレート構文> 
<テンプレート>
   <div>{{状態}}</div>
</テンプレート> 
//js スクリプトのセットアップ(){
     状態 = ref(10) とする 
     状態値 = 11
     {状態} を返す
}

<!-- テンプレート構文> 
<テンプレート>
   <div>{{状態名}}</div>
</テンプレート> 
//js スクリプトのセットアップ(){
     状態をreactive({name:'aaa'}})とします。 
     state.name = '張山'
     {状態} を返す
}

 var 状態 = 浅いリアクティブ({
    a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 状態.a = '1'
 //最初のデータ層を変更すると、ページが再レンダリングされます //state => Proxy {a:"a",gf:{...}}
//最初のレイヤーを変更せず、他のデータのみを変更すると、ページは再レンダリングされません。たとえば、state.gf.b = 2

var 状態 = 浅いRef({
   a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
状態.値.a = 1
/*
再レンダリングできません。shallowRef の原理は、shallowReactive({value:{}}) によっても作成されます。再レンダリングするには、値を変更する必要があります*/
状態.値 = {
    a:'1'、
    ガールフレンド:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

var 状態 = 浅いRef({
   a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
状態.値.gf.fsd = 4
トリガー参照(状態)

var obj = {name:'テスト'}
var 状態 = リアクティブ(obj)
var obj2 = toRaw(状態)
obj2.name = 'zs' // ページはレンダリングされません----
//ref で作成された場合は、値を取得します var obj = {name:'test'}
var 状態 = ref(obj)
var obj2 = toRaw(状態.値)

var obj = {name:'テスト'}
obj = markRaw(obj)
var 状態 = リアクティブ(obj)
state.name = 'zs' // データページは変更できず、変更されません

var obj = {name:'テスト'}
var 状態 = ref(obj.name)
state.name = 'zs' //この時点ではobjのname属性値は変更されず、UIは自動的に更新されます///
var obj = {name:'テスト'}
var state = toRef(obj,'name') // 設定できる属性値は 1 つだけです state.name = 'zs' // obj の name 属性値は変更されますが、UI は更新されません

var obj = {name:'test',age:16}
var 状態 = toRefs(obj)
state.name.value = 'zs' //obj の名前のプロパティ値も変更されますが、UI は更新されません state.age.value = 18 //obj の年齢のプロパティ値も変更されますが、UI は更新されません

関数 myRef(値){
   /*
    customRef 関数は、get/set の 2 つのメソッドを持つオブジェクトを返します。作成されたオブジェクトがデータを取得すると、get メソッドにアクセスでき、作成されたオブジェクトが値を変更すると、set メソッドがトリガーされます。customRef 関数には、track/trigger の 2 つのパラメーターがあります。track パラメーターは追跡を意味します。get メソッドで呼び出され、いつでもデータの変更を追跡します。トリガーパラメータはレスポンスをトリガーするために使用されます。setメソッドを呼び出してUIインターフェースを更新することができます*/
    戻り値: customRef((トラック,トリガー)=>{
       戻る {
          得る（）{
             track()//追跡データの戻り値     
          },
          set(newVal){
             値 = newVal
             trigger()//UIインターフェースを更新}
       }
    })

}

設定（）{
   var 年齢 = myRef(18)
   年齢値 = 20
}

<テンプレート>
   <div ref="ボックス"></div>

</テンプレート>
'vue' から {ref,onMounted} をインポートします。
/*
 セットアップメソッドは、ライフサイクルの beforeCreate と created の間に呼び出されます*/
<スクリプト>
   設定（）{
      var ボックス = ref(null)
      マウント時(()=>{
         console.log('onMounted',box.value)
      })
      コンソールログ(ボックス値)
      {ボックス}を返す

   }

</スクリプト>