VUE 3の新しい反応性システムを理解する-jsチュートリアル-php.cn

Understanding the New Reactivity System in Vue 3

最新のフロントエンドフレームワークのコアコンポーネントの1つは、レスポンシブシステムです。それらは、アプリケーションが高いインタラクティブ性、ダイナミズム、応答性を実現できるようにする魔法の杖です。レスポンシブシステムとは何か、実際にそれを適用する方法を理解することは、すべてのWeb開発者にとって重要なスキルです。

レスポンシブシステムは、同期中のデータソース（モデル）とデータ表現（ビュー）レイヤーを自動的に保持するメカニズムです。モデルが変更されるたびに、ビューはこれらの変更を反映するように再レンダリングされます。単純なマークダウンエディターを例として取りましょう。通常、2つのペインがあります。1つはMarkdownコードを作成する（基礎となるモデルの変更）、もう1つはコンパイルされたHTML（更新されたビューを表示する）のプレビュー用です。ライティングペインにコンテンツを書くと、すぐにプレビューペインで自動的にプレビューされます。もちろん、これは単なる簡単な例です。多くの場合、状況ははるかに複雑です。

多くの場合、表示したいデータは他のデータに依存します。この場合、依存関係が追跡され、それに応じてデータが更新されます。たとえば、FirstNameおよびLastNameプロパティに依存するFullNameプロパティがあるとします。依存関係が変更されると、FullNameプロパティが自動的に再計算され、結果が表示に表示されます。

今度は、応答性がどのようなものであるかを判断したので、新しいVUE 3レスポンシブメカニズムがどのように機能し、実際にそれを使用するかを学ぶ時が来ました。しかし、これを行う前に、古いVUE 2の応答性メカニズムとその欠点を簡単に見てみましょう。

キーポイント

VUE 3は、ES6プロキシを利用し、柔軟性と機能を強化するためにAPIを反映する完全に改善されたレスポンシブシステムを導入します。

VUE 3の方法
、および
reactiveref readonlyやrefなどの高度なレスポンシブAPIメソッドは、依存関係と副作用を効果的に管理することにより、より動的で応答性の高いアプリケーションを作成するためのツールを開発者に提供します。 reactive
computedVUE 3レスポンシブシステムには利点がありますが、ES6環境でのみサポートされており、応答性のあるプロキシと元のオブジェクトはIDの比較が異なります。 watch
VUE 2レスポンシブメカニズムを簡単に探索します
VUE 2の応答性メカニズムは、多かれ少なかれ「隠されています」。データオブジェクトに何かを入れ、Vueを暗黙的に応答します。一方では、これにより開発者の仕事が簡素化されますが、一方では、柔軟性が低下することにもつながります。

舞台裏で、Vue 2はES5 object.defineProperty（）を使用して、データオブジェクトのすべてのプロパティをgetterandsetterに変換します。各コンポーネントインスタンスについて、Vueは依存関係オブザーバーインスタンスを作成します。コンポーネントレンダリング中に依存関係として収集/追跡された属性は、オブザーバーによって記録されます。その後、依存関係のセッターが起動されると、オブザーバーはコンポーネントがビューを再レンダーして更新することを通知されます。これは基本的にすべての魔法の仕組みです。残念ながら、注意すべきことがいくつかあります。

index（例：arr [index] = newValue）
配列の長さを変更する（例：arr.length = newlength）

次の例で上記の状況を探りましょう：

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

ログイン後にコピー

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});

ログイン後にコピー

もちろん、これらの状況には解決策があります。次の例で説明します。

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      Vue.set(this.person, 'age', 30)
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        Vue.set(this.activities, index, newValue)
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.splice(0)
    }
  }
});

ログイン後にコピー

この例では、VUE 3を使用して、最初の例で使用されている内蔵JavaScript機能に戻り、すべてのメソッドが適切に機能します。

Vue 2.6では、Vue.observable（）APIメソッドが導入されました。レスポンシブシステムをある程度公開し、開発者がオブジェクトを明示的に応答させることができます。実際、これはVueがデータオブジェクトを内部的にラップするために使用するまったく同じ方法であり、単純なシナリオのために最小限のクロスコンポーネント状態ストレージを作成するのに役立ちます。しかし、それは有用ですが、この単一のアプローチは、VUE 3に付属する完全な機能が豊富なレスポンシブAPIの機能と柔軟性と一致しません。次のセクションで理由を確認します。

const App = {
  data() {
    return {
      person: {
        name: "David"
      },
      activities: [
        "Reading books",
        "Listening music",
        "Watching TV"
      ]
    }
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
}

Vue.createApp(App).mount('#app')

ログイン後にコピー

注：object.defineProperty（）はES5機能であり、シミュレートできないため、VUE 2はIE8以下をサポートしていません。

VUE 3レスポンシブメカニズムはどのように機能しますか

ターゲットと呼ばれます）であり、特定の操作に応答し、JavaScriptの組み込み動作を上書きする特別な関数（trapと呼ばれる）を提供しますオブジェクト。デフォルトの動作を使用する必要がある場合は、対応する反射APIを使用できます。これは、名前が示すように、プロキシAPIのメソッドを反映しています。これらのAPIがVUE 3でどのように使用されているかを確認するための例を調べてみましょう：

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

ログイン後にコピー

プロパティ：プロパティ名
値：属性値（このパラメーターは操作の設定にのみ使用されます）
受信機：操作が実行されるオブジェクト（通常はプロキシ）

Annotated Track（）およびTrigger（）関数はVUE固有であり、プロパティが読み取られたときとプロパティが変更/追加されるときに追跡するために使用されます。その結果、Vueはこのプロパティを使用してコードを再実行します。

例の最後の部分では、コンソールステートメントを使用して元の人オブジェクトを出力します。次に、別のステートメントを使用して、プロキシオブジェクトの属性名を読み取ります。次に、Age Propertyを変更し、新しい趣味のプロパティを作成します。最後に、人オブジェクトを再度出力して、それが正しく更新されているかどうかを確認します。

これは、VUE 3応答メカニズムの簡単な説明です。もちろん、実際の実装ははるかに複雑ですが、上記の例があなたに主なアイデアを得るのに十分であることを願っています。

VUE 3レスポンシブメカニズムを使用する場合、次のポイントを考慮する必要があります。

ES6対応ブラウザ

Vue 3 Responsive API

refは、基本値または通常のオブジェクトを受け入れ、応答性のある変化可能なrefオブジェクトを返します。 REFオブジェクトの属性値は1つだけで、ベース値または通常のオブジェクトを指します。
Reactiveはオブジェクトを受け入れ、オブジェクトの応答性のあるコピーを返します。変換は深く、すべてのネストされた特性に影響します。
readlyはrefまたはオブジェクト（通常または応答性）を受け入れ、元のオブジェクトの読み取り専用オブジェクトを返します。変換は深く、すべてのネストされた特性に影響します。
MarkRawはオブジェクト自体を返し、プロキシオブジェクトに変換されないようにします。

これらの方法の実用的なアプリケーションを見てみましょう：

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

ログイン後にコピー

を変更できますが、ビューを変更することはないことを示します。 MarkRawは、カントリーコード、カラー名、対応する16進数などの長いリストなど、応答性を高める必要のないオブジェクトに最適です。

最後に、次のセクションで説明したタイプチェック方法を使用して、作成した各オブジェクトのタイプをテストおよび決定します。 onmounted（）ライフサイクルフックを使用して、アプリケーションが最初にレンダリングされたときにこれらのチェックをトリガーします。

タイプチェック方法

このグループには、上記の4つのタイプチェッカーすべてが含まれています。

ISREFは、値がREFオブジェクトであるかどうかを確認します。

その他のREFメソッド

unrefはrefの値を返します。

triggerrefは、shallowrefに縛られた効果を手動で実行します。

CustomRefは、依存関係の追跡と更新トリガーを明示的に制御してカスタムREFを作成します。

浅い方法

ShallowReactiveは、独自のプロパティのみを追跡し、ネストされたオブジェクトを含めないレスポンシブプロキシを作成します。
shallowreadonlyは、ネストされたオブジェクトを除く独自のプロパティのみを読み取り専用に作成する読み取り専用プロキシを作成します。

この例は、設定の浅いRefオブジェクトの作成から始まります。次に、ビューでは、2つの入力コントロールを追加して、幅と高さのプロパティを編集します。しかし、それらを変更しようとすると、それらが更新されていないことがわかります。この問題を解決するために、オブジェクト全体とそのすべてのプロパティを変更するボタンを追加します。今では機能します。これは、値のコンテンツ（単一のプロパティとしての幅と高さ）が応答性のあるオブジェクトに変換されないが、値（オブジェクト全体）のバリエーションがまだ追跡されているためです。

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

ログイン後にコピー

最後の2つの例からのネストされた座標オブジェクトは、変換の影響を受けず、通常のオブジェクトのままです。これは、自由に変更できることを意味しますが、その変更はVUEによって追跡されません。

変換方法

次の3つの方法は、プロキシを参照または通常のオブジェクトに変換するために使用されます。

TOREFは、ソースレスポンシブオブジェクトのプロパティのREFを作成します。 refは、ソースプロパティへの応答性のある接続を維持します。

torefsは、応答性のあるオブジェクトを通常のオブジェクトに変換します。通常のオブジェクトの各プロパティは、元のオブジェクトの対応するプロパティを指す参照です。

これらの変換が次の例でどのように機能するかを見てみましょう。
次に、同じ名前で人の名前のプロパティを参照に変換します。次に、ビューでは、2つの入力コントロールを追加します。1つは名前ref用、もう1つは人の名前のプロパティです。それらの1つを変更すると、もう1つもそれに応じて更新されるため、それらの間の応答性のある接続が維持されます。

次に、人のすべてのプロパティを、PersonDetailsオブジェクトに含まれる単一のREFに変換します。次に、ビューでは、2つの入力コントロールを再度追加して、作成したばかりのREFをテストします。ご覧のとおり、PersonDetailsの年齢は、前の例のように、人の年齢財産と完全に同期されています。

最後に、人の応答性オブジェクトをRawserson Normalオブジェクトに変換します。次に、ビューでは、Rawsersonの趣味プロパティを編集するための入力コントロールを追加します。しかし、私たちが見ることができるように、Vueは変換されたオブジェクトを追跡しません。

計算および監視方法

メソッドの最後のセットは、複雑な値を計算し、特定の値を「監視」するために使用されます。
次の例を考えてみましょう
この例では、FirstNameおよびLastName Refに基づいて計算されるFullName Computed変数を作成します。次に、ビューでは、2つの入力コントロールを追加して、フルネームの2つの部分を編集します。ご覧のとおり、パーツを変更すると、フルネームが再計算され、結果が更新されます。
<div id="app"> <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1> <button @click="addAgeProperty">Add "age" property</button> <p>Here are my favorite activities:</p> <ul> <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li> </ul> <button @click="clearActivities">Clear the activities list</button> </div>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
次に、ボリュームRefを作成し、Watch Effectを設定します。ボリュームが変更されるたびに、効果がコールバック関数を実行します。これを証明するために、ビューでは、ボリュームを増加させるボタンを追加します。コールバック関数に条件を設定して、ボリュームの値が3で割り切れることができるかどうかをテストします。それがtrueを返すと、アラートメッセージが表示されます。アプリケーションが開始されると効果は1回実行され、ボリュームの値を設定し、ボリュームの値が変更されるたびに再び実行されます。

最後に、状態Refを作成し、その変更を追跡するために時計関数を設定します。状態が変更されると、コールバック関数が実行されます。この例では、ボタンを追加して、再生と一時停止の間に状態を切り替えます。これが起こるたびに、アラートメッセージが表示されます。

WatcheffectとWatchは機能性の点で非常に似ていますが、いくつかの明らかな違いがあります。
- WatchEffectは、コールバック関数に含まれるすべてのレスポンシブプロパティを依存関係として扱います。したがって、コールバックに3つのプロパティが含まれている場合、それらはすべて変更のために暗黙的に追跡されます。
- watchは、コールバックのパラメーターとして含めるプロパティのみを追跡します。さらに、監視属性の以前の値と現在の値を提供します。
ご覧のとおり、VUE 3レスポンシブAPIは、さまざまなユースケースで使用できる幅広い方法を提供します。 APIは非常に大きく、このチュートリアルでは、基本のみを探ります。詳細な調査、詳細、およびエッジケースについては、レスポンシブAPIドキュメントにアクセスしてください。

結論
この記事では、レスポンシブシステムとは何か、VUE 2およびVUE 3でどのように実装できるかを紹介します。 Vue 2では、Vue 2が正常に解決されたいくつかの欠点があることがわかります。 VUE 3レスポンシブメカニズムは、最新のJavaScript機能に基づいた完全な書き直しです。その長所と短所を要約しましょう。

長所：
短所：
最終的な行は、VUE 3レスポンシブメカニズムは、VUE開発者と非ビュー開発者の両方が使用できる柔軟で強力なシステムであるということです。あなたの状況が何であれ、それをつかんで、驚くべきものを作り始めてください。

VUE 3レスポンシブシステムFAQ（FAQ）

VUE 3レスポンシブシステムとは何ですか？

VUE 3レスポンシブシステムは、人気のJavaScriptフレームワークであるVue.jsの基本的な側面です。アプリケーション状態の変更を追跡し、これらの変更を反映するためにDOM（ドキュメントオブジェクトモデル）を更新する責任があります。このシステムは、「レスポンシブオブジェクト」の概念を中心に構築されています。これらのオブジェクトのプロパティが変更されると、Vueは必要な更新を自動的にトリガーします。これにより、開発者は動的で応答性の高いWebアプリケーションを簡単に構築できます。

VUE 3レスポンシブシステムはVUE 2とどのように異なりますか？

VUE 3のレスポンシブシステムは、JavaScriptのプロキシオブジェクトを使用して完全に書き直されており、VUE 2のObject.DefinePropertyメソッドと比較して、変更を追跡するためのより効率的で強力な方法を提供します。この新しいシステムにより、VUEはネストされたプロパティの変更を追跡できます。これは、VUE 2の制限です。また、メモリフットプリントを削減し、パフォーマンスを向上させます。

私のアプリケーションでVUE 3応答システムを使用する方法は？

VUE 3レスポンシブシステムを使用するには、Reactive（）関数を使用してデータをラップする必要があります。この関数により、オブジェクトとそのプロパティが応答します。プロパティが変更されると、Vueはコンポーネントに依存するコンポーネントを自動的に返信します。また、ref（）関数を使用して、単一の変数を応答するものにすることもできます。

VUE 3レスポンシブメカニズムにおけるREF関数の役割は何ですか？

vue 3のref（）関数は、値への応答性の参照を作成するために使用されます。値を単一のプロパティ「.Value」でオブジェクトのラップし、このオブジェクトを応答します。これは、値が変更されると、このREFを使用するコンポーネントが更新されることを意味します。

VUE 3のリアクティブとREFの違いは何ですか？

raceive（）およびref（）は、両方ともVUE 3でデータの応答性を高めるために使用されますが、さまざまなシナリオで使用されます。 Reactive（）関数はオブジェクトを応答するために使用されますが、Ref（）関数は文字列や数値の応答性などのベース値を作成するために使用されます。ただし、ref（）はオブジェクトでも使用できます。この場合は、ractive（）と同様に動作します。

Vue 3配列の応答性に対処する方法は？

VUE 3アレイの応答性は、オブジェクトを処理するものと同じです。 Reactive（）関数を使用してアレイを応答する場合、Vueは配列要素とその長さの変更を追跡します。これは、要素を追加、削除、または交換する場合、Vueはその配列に依存するコンポーネントを更新することを意味します。

レスポンシブメカニズムのTOREFS機能は何ですか？
VUE 3のtorefs（）関数は、応答性のあるオブジェクトを通常のオブジェクトに変換するために使用されます。元のオブジェクトの各プロパティはrefとして表されます。これは、レスポンシブオブジェクトを分解したいが、それでも応答性を維持する場合に役立ちます。

VUE 3のオブジェクトが応答するのを防ぐ方法は？

MarkRaw（）関数を使用して、オブジェクトが応答しないようにすることができます。これは、Vueがオブジェクトの変更を追跡することを望まない場合に役立ちます。

VUE 3応答性メカニズムの計算された関数は何ですか？
VUE 3のCOMPUTED（）関数は、他の応答性に依存するレスポンシブプロパティを作成するために使用されます。依存関係が変更されると、計算されたプロパティの値が自動的に更新されます。これは、基礎となるデータが変更されたときに更新する必要がある計算または変換に非常に役立ちます。

vue 3マップとセットの応答性に対処する方法は？

VUE 3のレスポンシブシステムは、JavaScriptのマップを完全にサポートし、データ構造を設定します。マップを作成したり、レスポンシブを設定したりすると、Vueはエントリまたは要素の変更をそれぞれ追跡します。これは、エントリまたは要素を追加、削除、または交換する場合、Vueはマップまたはセットに依存するコンポーネントを更新することを意味します。