vue3でrefとreactiveを使用する方法

1. ref

ref は、通常の変数## を変換できる Vue3 の関数です。 #Convert 応答変数に。 ref を使用する場合、初期値を渡す必要があります。ref はこの初期値を含むオブジェクトを返します。

ref を使用するための構文は次のとおりです。

import { ref } from 'vue';
const count = ref(0);

count という名前の変数を作成します。は0です。 ref 関数を呼び出すことにより、count 変数を ref オブジェクトに変換します。コンポーネントで count を使用する場合、.value を通じてその値にアクセスする必要があり、ref.value = でその値を変更できます。ただし、ref がテンプレートのトップレベル プロパティとしてアクセスされる場合、それらは自動的に「ラップ解除」されるため、.value を使用する必要はありません。 :

------------------

.value をタグ内で使用する場合は追加する必要はありませんが、タグ内で使用する場合は .value

ref を使用して DOM 要素の変更を監視することもできます:

<template>
  <div ref="myDiv">这是一个 DOM 元素</div>
</template>

<script>
  import { ref, onMounted } from &#39;vue&#39;;

  export default {
    setup() {
      const myDiv = ref(null);

      onMounted(() => {
        console.log(myDiv.value.innerHTML);
      });

      return {
        myDiv,
      };
    },
  };
</script>

ref# を作成しました。 ##myDiv ## オブジェクトを作成し、それを div 要素に割り当てます。コンポーネントの setup 関数では、 onMounted フック関数を使用します。コンポーネントがレンダリングされた後、myDiv 要素の innerHTML. が出力されます。 2. reactive

reactive

通常のオブジェクトを 応答式オブジェクト##に変換できます。 ＃。 ref とは異なり、reactive は、値を含むオブジェクトではなく、リアクティブ オブジェクトを返します。リアクティブ オブジェクトのプロパティにアクセスすることで、その値を取得または変更できます。 reactive を使用するための構文は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">import { reactive } from &amp;#39;vue&amp;#39;; const state = reactive({ count: 0, });</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、

という名前の reactive オブジェクトを作成します。これには、名前が含まれています。これは、次の属性です。

、初期値は 0 です。 コンポーネントで state を使用すると、通常のオブジェクトのプロパティと同じようにそのプロパティにアクセスできます。

<template>
  <div>{{ state.count }}</div>
</template>

プロパティへのアクセスに加えて、 reactive は、通常の JavaScript オブジェクトまたは配列に対して応答性の高い処理を実行することもできます。

を通じて通常のオブジェクトを応答性の高いオブジェクトに変換し、オブジェクト全体の応答性の高い追跡を実現できます。たとえば: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">const obj = { a: 1, b: 2 }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.a = 3; console.log(obj.a); // 输出 3</pre><div class="contentsignin">ログイン後にコピー</div></div>reactive 入れ子になったオブジェクトや配列にリアクティブ オブジェクトを作成することもできます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">const obj = { a: 1, b: { c: 2 }， d: [1, 2, 3] }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.b.c = 3; reactiveObj.d.push(4);</pre><div class="contentsignin">ログイン後にコピー</div></div>reactive は、入れ子になったオブジェクトで toRef を使用して、リアクティブ オブジェクトのプロパティをリアクティブ参照に変換することもサポートしています。テンプレートでの使用に便利です。 。例:

const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);

// 模板中使用
<template>
  <div>{{ b.c }}</div>
</template>

要約すると、

は、プロパティへのアクセスに加えて、オブジェクトまたは配列全体のリアクティブな追跡を処理でき、ネストされた

の使用もサポートします。オブジェクト。テンプレートで使用すると便利です。 3. refとreactiveの使い方の比較1. refの使い方

作成した変数は渡すことができます

値を取得および変更します。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">import { ref } from &amp;#39;vue&amp;#39; // 创建ref const count = ref(0) // 获取ref的值 console.log(count.value) // 输出 0 // 修改ref的值 count.value = 1 console.log(count.value) // 输出 1</pre><div class="contentsignin">ログイン後にコピー</div></div>2. reactive の使用方法

作成されたオブジェクトは、構造化代入を通じてその属性値を取得および変更する必要があります。例:

import { reactive } from 'vue'

// 创建reactive对象
const obj = reactive({
  count: 0
})

// 获取reactive对象的属性值
console.log(obj.count) // 输出 0

// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

以上がvue3でrefとreactiveを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。