Vue3 の ref と toRef の違いを簡単に分析します

<テンプレート>
 <div>
    <div>
      <div>{{stateObj} </div>
       <button @click="func1">ボタン</button>
    </div>
 </div>
</テンプレート>
<スクリプト>
'vue' から {ref} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定（）{
    let obj={name:"张三",age:22}
    
    // オブジェクト内のプロパティをレスポンシブ データに変換します // オブジェクトをレスポンシブ データに変換する代わりに let stateObj=ref(obj.name)
    関数func1(){
      stateObj.value="張三が李斯になる";
      //元のデータは変更されていません。元のデータ obj {name: "张三", age: 22}
      console.log("元のデータ obj",obj)

      // レスポンシブデータが変更されました/**
      レスポンシブ stateObj RefImpl {
          _rawValue: "張三が李思になる", _shallow: false,
          __v_isRef: true、_value: "張三が李四になる"
      }
      **/
      // ref オブジェクトになります console.log("responsive stateObj",stateObj)

    }

    {stateObj,func1} を返す
},
}
</スクリプト>

<テンプレート>
 <div>
    <div>
      <div>{{状態}}</div>
       <button @click="func1">ボタン</button>
    </div>
 </div>
</テンプレート>
<スクリプト>
'vue' から { toRef } をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定（）{
    let obj={name:"张三",age:22}
    // オブジェクト内のプロパティ名をレスポンシブ データに変換します // オブジェクトをレスポンシブ データに変換する代わりに let state=toRef(obj, 'name');
    console.log('toRef',状態)
    関数func1(){
      state.value="私はLi Siです";
      コンソールログ('obj',obj)
      console.log('状態',状態)
    }
    {state,func1} を返す
  },
}
</スクリプト>