Vue3 の Ref と reactive、それらの違いは何ですか?

この記事では、Vue.js 3 ref と reactive について説明し、ref と reactive の違いを紹介します。

#キーポイント

reactive() オブジェクトのみを受け入れますパラメータとして、JS プリミティブ型 (String、Boolean、Number、BigInt、Symbol、null、unknown) はサポートされていません。 [関連する推奨事項: vue.js チュートリアル ]

ref() はバックグラウンドで reactive()

を呼び出します

reactive() はオブジェクトをサポートし、ref() は内部で reactive() を呼び出すため、どちらのメソッドもオブジェクトをサポートします

ただし、

ref() 値の再割り当てに使用できる .value 属性がありますが、reactive() は再割り当てできません (応答性が失われます)

使用シナリオ

ref()<strong></strong>

数値型が次の場合に使用されます。 JS プリミティブ型 (例:

'string'、true、23)

オブジェクトが割り当てられ、その後、オブジェクトを割り当てる必要がある場合再割り当て (たとえば、配列 -

詳細についてはここを参照してください)

reactive()<strong></strong>

数値型の場合はオブジェクトなので、再割り当てする必要はありません。

ref() を使用すると、オーバーヘッドを追加することなく、内部で reactive() も呼び出されます。

概要

##ref() は、すべてのオブジェクト タイプをサポートし、.value を介して再割り当てできるため、正しい選択であると思われます。 ref() も問題ありませんが、API に慣れると、reactive() の方がオーバーヘッドが少なく、ニーズにはこちらの方が適していることがわかります。

ref() の場合

は

ref() を使用して初期化されますが、ref() 配列など、再割り当てが必要なオブジェクトに適しています。

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

上記で reactive() が使用されている場合は、オブジェクトの割り当てではなく属性の割り当てが必要です。

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

reactive() case

##reactive()

同じグループに属するデータのグループを初期化するのに適しています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">const person = reactive({ name: &amp;#39;Albert&amp;#39;, age: 30, isNinja: true, });</pre><div class="contentsignin">ログイン後にコピー</div></div>上のコードは以下のコードよりも論理的です

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

プログラミング関連の知識の詳細については、

プログラミング ビデオ

をご覧ください。 ！

以上がVue3 の Ref と reactive、それらの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。