Vue 3におけるrefとtoRefの違いを簡単に分析する。
1.refはコピーで、表示は更新されます。
refを利用して、あるオブジェクトのいずれかの属性値をレスポンスデータにすると
応答式データを修正すると元のデータには影響しません。
同時に表示します。
refはコピーです。元のデータには影響しません。
toRefを利用すれば、あるオブジェクトの属性が応答式のデータになります。
応答式のデータを修正すると元のデータに影響します。
データがtoRefで作成されている場合、値を変更した後、データは表示をトリガしません。
toRefは参照ですこれは以前のオブジェクトの属性を参照します。
ですから、修正したら、元のデータの終わりの値に影響します。
refコピー、応答式データの修正は、以前のデータに影響を与えず、画面が変更されます。
toRef参照は、応答式のデータを修正すると、以前のデータに影響を及ぼし、画面は更新されません。
toRefの使用シーン
応答式データを元のデータと関連付ける場合。
そして応答式データを更新したら、表示更新したくないです。それならtorefが使えます。
リボン:
refとtoRefの違い
(1).refは本質的にコピーであり、修正応答式データは元のデータに影響しない。toRefの本質は引用関係であり、応答式データを修正すると元のデータに影響を与える。
(2).refデータが変化し、画面が自動的に更新されます。toRefデータが変更されると、画面は自動的に更新されません。
(3).toRef伝参加refが異なる。ToRefは二つのパラメータを受信します。一つ目のパラメータはどのオブジェクトですか?二つ目のパラメータはオブジェクトのどの属性ですか?
締め括りをつける
ここで、Vue 3のrefとtoRefの違いについての文章を紹介します。Vue 3 refとtoRefの違いについては、以前の文章を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。
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の違いについては、以前の文章を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。