Vue 3におけるrefとtoRefの違いを簡単に分析する。


1.refはコピーで、表示は更新されます。
refを利用して、あるオブジェクトのいずれかの属性値をレスポンスデータにすると
応答式データを修正すると元のデータには影響しません。
同時に表示します。
refはコピーです。元のデータには影響しません。

<template>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">  </button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"  ",age:22}
    
    //          
    //       
    //             
    let stateObj=ref(obj.name)
    function func1(){
      stateObj.value="      ";
      //               obj {name: "  ", age: 22}
      console.log("    obj",obj)

      //            
      /**
         stateObj RefImpl {
          _rawValue: "      ", _shallow: false,
          __v_isRef: true, _value: "      "
      }
      **/
      //     ref   
      console.log("   stateObj",stateObj)

    }

    return {stateObj,func1}
},
}
</script>
2.toRefは引用であり、ビューは新しいものとは関係ない。
toRefを利用すれば、あるオブジェクトの属性が応答式のデータになります。
応答式のデータを修正すると元のデータに影響します。
データがtoRefで作成されている場合、値を変更した後、データは表示をトリガしません。
toRefは参照ですこれは以前のオブジェクトの属性を参照します。
ですから、修正したら、元のデータの終わりの値に影響します。

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">  </button>
    </div>
 </div>
</template>
<script>
import {toRef} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"  ",age:22}
    //          name       
    //             
    let state=toRef(obj, 'name');
    console.log('toRef',state)
    function func1(){
      state.value="    ";
      console.log('obj',obj)
      console.log('state',state)
    }
    return {state,func1}
  },
}
</script>
3.結論
refコピー、応答式データの修正は、以前のデータに影響を与えず、画面が変更されます。
toRef参照は、応答式のデータを修正すると、以前のデータに影響を及ぼし、画面は更新されません。
toRefの使用シーン
応答式データを元のデータと関連付ける場合。
そして応答式データを更新したら、表示更新したくないです。それならtorefが使えます。
リボン:
refとtoRefの違い
(1).refは本質的にコピーであり、修正応答式データは元のデータに影響しない。toRefの本質は引用関係であり、応答式データを修正すると元のデータに影響を与える。
(2).refデータが変化し、画面が自動的に更新されます。toRefデータが変更されると、画面は自動的に更新されません。
(3).toRef伝参加refが異なる。ToRefは二つのパラメータを受信します。一つ目のパラメータはどのオブジェクトですか?二つ目のパラメータはオブジェクトのどの属性ですか?
締め括りをつける
ここで、Vue 3のrefとtoRefの違いについての文章を紹介します。Vue 3 refとtoRefの違いについては、以前の文章を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。