vue3 の ref、toRef、toRef について説明する記事

この記事では、vue3 プロジェクトでの ref、toRef、toRefs の使用について詳しく説明します。皆さんのお役に立てれば幸いです。

#1. ref

#ref 関数は、単純なデータ型を応答性の高いデータ (複雑なデータ型) にラップできます。 JS で値を操作する場合は、.value 属性を追加する必要があることに注意してください。テンプレート内で通常どおり使用できます。

例:

ref は基本型データをラップします
• App.vue
  

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

可視書き込みと reactive() 同じ, ただし、jsで記述する場合は.valueを追加する必要があります。 [関連する推奨事項:
vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

複雑なクラス型データの ref パッケージ化
• 注: ref はラップすることもできます複合データ データ型は応答データであり、バックエンドから返されるデータなど、データ型が不明な場合は、通常、 ref を使用することをお勧めします。
  

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

どうやって選ぶの?
• ref() と reactive() は、Vue.js3.0 で提供される 2 つの応答性の高い API です。
  ref() は、主に応答性の高いデータを作成するために使用されます。これは、通常の JavaScript オブジェクトを応答性の高いオブジェクトに変換し、データの変更を Vue インスタンスで追跡できるようにします。データが変更されると、Vue 関連ビューが自動的に更新されます。 ref() によって作成された応答データは、.value 属性を通じてアクセスおよび変更できます。
  reactive() は主に、複数の値を含む状態オブジェクトとして使用できるリアクティブ オブジェクトを作成するために使用され、通常は複雑な状態を管理するために使用されます。通常の JavaScript オブジェクトを応答性の高いオブジェクトに変換でき、ネストされたプロパティをサポートしており、ネストされたプロパティが変更された場合でも、Vue インスタンスによって追跡されます。レスポンシブ オブジェクトのプロパティが変更されると、Vue は関連するビューを自動的に更新します。
  ラップする必要があるオブジェクトがオブジェクトであることが明確にわかっている場合は、reactive を使用することをお勧めします。それ以外の場合は、ref を使用します。
  Vue3.2 以降は ref の使用が推奨され、パフォーマンスが大幅に向上しました。
  

# 2. toReftoRef 関数の役割: レスポンシブ オブジェクトのプロパティを別のレスポンシブ データに変換し、変換された値は前の値と関連します (ref 関数も変換できますが、値は関連しません)。

まず、次の例を見てみましょう:

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

この方法で記述すると、データを応答性の高いデータに変更することもできますが、2 つの問題が発生します:

質問 1: データを取得するにはテンプレート内で obj. を使用する必要があり、面倒です。
問題 2: テンプレートでは名前と年齢のみが使用されていますが、オブジェクト全体がエクスポートされます。これは不必要であり、パフォーマンスの無駄です。

• <template>
    <div>
        <h2>name: {{ name }} </h2>
        <button>修改数据</button>
    </div></template><script>
    import { reactive,toRef  } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = reactive({
                name: &#39;初映&#39;,
                age: 18,
                address: &#39;江西&#39;,
                sex: &#39;男&#39;,
            })
            const name = toRef(obj, &#39;name&#39;)
            const updateName = () => {
                obj.name = &#39;初映CY的前说&#39;
            }
            return { name, updateName }
        },
    }</script>

このようにして、必要なデータを戻り値に入れることができます。これにより、パフォーマンスとテンプレートへの記述が節約され、「オンデマンドでインポート」に少し似たものになります

3. torefstoRefs 関数の役割: 応答オブジェクト内のすべてのプロパティを個別の応答データに変換し、変換された値は前のやつ。

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs はすべての応答データを返します。その後は、データ名を直接使用するだけです。忘れずに...oh

を追加してください。早速、これら 3 つのメソッドの使用方法とリアクティブとの違いを学びましょう。

(学習ビデオ共有:

vuejs 入門チュートリアル

、基本プログラミング ビデオ )

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