vue3 の ref、toRef、toRef について説明する記事-Vue.js-php.cn

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

青灯夜游

リリース： 2023-04-13 17:32:56

転載

2028 人が閲覧しました

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

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

#1. ref

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

例:

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>

ログイン後にコピー

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

注: 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>

ログイン後にコピー

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

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 つの問題が発生します: vue3 の ref、toRef、toRef について説明する記事

<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 vue3 の ref、toRef、toRef について説明する記事