引用：
vue2 から vue3 に移行したとき、データの応答性の変化は実際にはわかりませんでした。以前は data 関数内で直接変数を定義していましたが、毎回 ref/reactive を使用するのは、やや不快です。しかし、それは大きな問題ではありません 結局のところ、フロントエンドが巨大な時代には、時代のペースについていかないと、技術が追いつかないだけでなく、面接も簡単になります動けなくなる。そこで今日は、vue3 で開発する際のデータ応答性の理解について話しましょう。
vue3 の応答性は以下に基づいています。proxy
vue2 から vue3Object.definePropertyへはproxy質的な飛躍です。vue2 の応答性には、データ ハイジャックのために再帰と各オブジェクトのプロパティのトラバースが必要ですが、vue3 ではオブジェクト レイヤーを監視するだけで済みます。それでは、さっそく、よくある質問について説明していきましょう。
refとreactiveの関係
ref を使用して基本型を定義した場合でも、実際にはデータ ハイジャックをリッスンするObject.definePropertyために。ただし、参照型が定義されている場合、基になるコードはreactive関数をデータをハイジャックします。したがって、ref と reactive の関係はコンパクトです。ソースコードを通じてそれを確認できます。
this_value = useDirectValue ? newVal : toReactive(newVal)で判断し、useDirectValue で浅くて読み取り可能なデータかどうかを判断していることがわかります。したがって、オブジェクトを渡すと、toReactive(newVal)ステップに入ります。toReactiveFunction は、リアクティブ定義の関数エントリです。
reactive で定義された変数を再代入すると応答性が失われますが、ref は応答性を失いません。
初めて vue3 に触れたとき、私たちはこの問題に非常に困惑しました。この問題があることは知っていましたが、根本的な原因はわかりませんでした。今日はこの問題についてお話します。
import {ref,reactive} from 'vue';
let test = {age:2};
let obj = reactive({age:1})
let obj1 = ref({age:1})
obj = test;
obj1.value = test;
reactive() によって組み込まれたオブジェクトは内部プロキシ エージェントであるため、応答します。ただし、テストのようなオブジェクトの場合、データ ハイジャックは実行されず、オブジェクトに値が割り当てられる場合、実際には参照アドレスの割り当てになります。その後、obj オブジェクトはデータ ハイジャックのない参照アドレスになり、応答性が失われます。ただし、obj1 が再割り当てされると、その応答性は維持されます。実際、これは非常に単純で、上の図のコードに関連しています。注意深い人は、set関数。
はい、ref で定義された変数を再代入するときは、 setfunction。再代入がオブジェクトの場合toReactiveは、データ ハイジャックのために再び関数に入ります。そのため、ref で定義された変数は再代入時に応答を保持します。式のオブジェクトの根本原因。
応答性の高いオブジェクトを構造化すると、応答性が失われます。
上記のことから、 ref で定義されたオブジェクト変数であっても、 reactive で定義されたオブジェクト変数であっても、reactive関数。しかし、物体であっても、応答性の損失は発生します。
<script setup>
import {reactive,onMounted} from 'vue';
let obj = {a:18,aa:{age:18},aaa:{friend:{age:18}}
}
let rect = reactive(obj);
let {a,aa,aaa} = rect;
onMounted(()=>{setTimeout(()=>{a = 2;aa.age = 2;aaa.friend.age = 2;},2000)
})
</script>
<template><div>{
{a}}</div><div>{
{aa.age}}</div><div>{
{aaa.friend.age}}</div>
</template>
上記の操作の結果、変数 a には応答型スタイルがなく、aa と aaa の両方が応答型になります。これは、代入の分割ではプリミティブ型であれば値渡し、参照型であれば参照アドレス渡しとなるためです。またreactive()、定義した変数内のget関数にはこのような処理があります
a = rect.a; //rect.a是一个基本类型，所以是直接赋值
aa = rect.aa; //rect.aa是一个引用类型，在内部处理时触发条件判断，且非可读对象即从Map数据结构中返回已经代理的响应式对象
aaa = rect.aaa //跟rect.aa一个道理
したがって、今後レスポンシブオブジェクトを分解する際には、上記の内部判定ロジック(# . #)を覚えておくことで対応することができます。もちろん、vuex または pinia の値にも同じことが当てはまり、応答性を実現するcomputed()には。したがって、レスポンシブに返すことcomputed()ができます。
やっと
JS の高頻度面接質問 75 を整理し、JS に関する面接官の質問に基本的に対処できることを保証できる回答と分析を提供します。
困っている友達は、下のカードをクリックして無料で受け取って共有できます