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

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

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

今度は、応答性がどのようなものであるかを判斷したので、新しいVUE 3レスポンシブメカニズムがどのように機(jī)能し、実際にそれを使用するかを?qū)Wぶ時(shí)が來(lái)ました。しかし、これを行う前に、古いVUE 2の応答性メカニズムとその欠點(diǎn)を簡(jiǎn)単に見(jiàn)てみましょう。

キーポイント

VUE 3の新しいレスポンシブシステムは、アプリケーションステータスの変更を自動(dòng)的に追跡および更新し、MAPやセットなどのより複雑なデータ構(gòu)造をサポートします。
• VUE 3の方法
、
• 、および
方法は、開(kāi)発者がより詳細(xì)にデータの応答性を制御できるようにします。
• reactiveref readonlyやrefなどの高度なレスポンシブAPIメソッドは、依存関係と副作用を効果的に管理することにより、より動(dòng)的で応答性の高いアプリケーションを作成するためのツールを開(kāi)発者に提供します。 reactive
VUE 3は、Arrayの長(zhǎng)さとオブジェクトのプロパティの変更を検出するなど、VUE 2応答システムに見(jiàn)られる制限を解決します。
• computedVUE 3レスポンシブシステムには利點(diǎn)がありますが、ES6環(huán)境でのみサポートされており、応答性のあるプロキシと元のオブジェクトはIDの比較が異なります。 watch
• VUE 2レスポンシブメカニズムを簡(jiǎn)単に探索します
• VUE 2の応答性メカニズムは、多かれ少なかれ「隠されています」。データオブジェクトに何かを入れ、Vueを暗黙的に応答します。一方では、これにより開(kāi)発者の仕事が簡(jiǎn)素化されますが、一方では、柔軟性が低下することにもつながります。

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

検出を変更するための予防策
vueは、Object.defineProperty（）の制限により、特定のデータの変更を検出できません。これらには次のものが含まれます
オブジェクトに屬性を追加/削除します（例：obj.newkey = value）
• index（例：arr [index] = newValue）
によって配列アイテムを設(shè)定します
• 配列の長(zhǎng)さを変更する（例：arr.length = newlength）
幸いなことに、これらの制限に対処するために、VueはVue.set APIメソッドを提供します。これにより、応答性のあるオブジェクトにプロパティが追加され、新しいプロパティが応答性が高いことを確認(rèn)し、ビューの更新をトリガーします。

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

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

上記の例では、これらの3つの方法のいずれも機(jī)能しないことがわかります。 Personオブジェクトに新しいプロパティを追加することはできません。インデックスを使用してアクティビティアレイ內(nèi)のアイテムを編集することはできません。また、アクティビティアレイの長(zhǎng)さを変更することはできません。

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
    }
  }
});

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

この例では、vue.set APIメソッドを使用して、new AgeプロパティをPersonオブジェクトに追加し、アクティビティアレイから特定のアイテムを選択/変更します。最後のケースでは、JavaScriptに組み込まれたSplice（）アレイメソッドのみを使用します。
私たちが見(jiàn)ることができるように、これは機(jī)能しますが、それは少し不器用であり、一貫性のないコードベースにつながります。幸いなことに、VUE 3では、この問(wèn)題が解決されました。次の例でそれがどのように魔法であるか見(jiàn)てみましょう：

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を使用して、最初の例で使用されている內(nèi)蔵JavaScript機(jī)能に戻り、すべてのメソッドが適切に機(jī)能します。

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

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機(jī)能であり、シミュレートできないため、VUE 2はIE8以下をサポートしていません。

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

VUE 3のレスポンシブシステムは、ES6プロキシを利用してAPIを反映するように完全に書(shū)き直されています。新しいバージョンは、システムを以前よりも柔軟で強(qiáng)力にする機(jī)能が豊富なレスポンシブAPIを明らかにしています。
プロキシAPIを使用すると、開(kāi)発者はターゲットオブジェクトの低レベルオブジェクト操作を傍受および変更できます。プロキシは、オブジェクトのクローン/ラッパー（a

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

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

新しいプロキシを作成するには、新しいプロキシ（ターゲット、ハンドラー）コンストラクターを使用します。ターゲットオブジェクト（Personオブジェクト）とハンドラーオブジェクトの2つのパラメーターを受け入れます。これは、どの操作（取得および設(shè)定操作）が傍受されるかを定義します。ハンドラーオブジェクトでは、GETトラップとセットトラップを使用して、プロパティが読み取られたときとプロパティが変更/追加されるときに追跡します。メソッドが適切に機(jī)能することを確認(rèn)するために、コンソールステートメントを設(shè)定します。
トラップを取得して設(shè)定します。次のパラメーターを使用します
ターゲット：プロキシでラップされたターゲットオブジェクト
• プロパティ：プロパティ名
• 値：屬性値（このパラメーターは操作の設(shè)定にのみ使用されます）
• 受信機(jī)：操作が実行されるオブジェクト（通常はプロキシ）
反射APIメソッドは、対応するプロキシメソッドと同じパラメーターを受け入れます。特定の操作にデフォルトの動(dòng)作を?qū)g裝し、Get Trapの屬性名を返し、プロパティが設(shè)定されている場(chǎng)合はtrueを返すために使用されます。

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

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

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

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

ES6対応ブラウザ

でのみ利用できます
レスポンシブプロキシは、元のオブジェクトに等しくありません
• Vue 3 Responsive API
を探索します
最後に、VUE 3レスポンシブAPI自體に行きます。次のセクションでは、論理的にグループ化されたAPIアプローチを調(diào)査します。この方法で提示することを忘れがちだと思うので、この方法をグループ化しました?；兢槭激幛蓼筏绀?。
基本的な方法
最初のグループには、データの応答性を制御するための最も基本的な方法が含まれています。
• refは、基本値または通常のオブジェクトを受け入れ、応答性のある変化可能なrefオブジェクトを返します。 REFオブジェクトの屬性値は1つだけで、ベース値または通常のオブジェクトを指します。
• Reactiveはオブジェクトを受け入れ、オブジェクトの応答性のあるコピーを返します。変換は深く、すべてのネストされた特性に影響します。
• readlyはrefまたはオブジェクト（通常または応答性）を受け入れ、元のオブジェクトの読み取り専用オブジェクトを返します。変換は深く、すべてのネストされた特性に影響します。
• MarkRawはオブジェクト自體を返し、プロキシオブジェクトに変換されないようにします。

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

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

この例では、4つの基本的な応答方法の使用を調(diào)べます。
最初に、値が0のカウンターREFオブジェクトを作成します。次に、ビューでは、それぞれ2つのボタンを配置し、それぞれカウンターの値を増加させて減少させます。これらのボタンを使用すると、そのカウンターが実際に反応することがわかります。
第二に、人の応答性のあるオブジェクトを作成します。次に、ビューでは、その人の名前と年齢の編集に使用される2つの入力コントロールを配置します。 Human Propertiesを編集すると、すぐに更新されます。
第三に、數(shù)學(xué)の読み取り専用オブジェクトを作成します。次に、ビューでは、數(shù)學(xué)のPIプロパティの値を2倍にするボタンを設(shè)定します。ただし、ボタンをクリックすると、オブジェクトが読み取り専用であり、そのプロパティを変更できないことを示すコンソールにエラーメッセージが表示されます。
最後に、プロキシに変換して元のオブジェクトとしてマークすることを望まないアルファベットナンバーオブジェクトを作成します。すべての文字と対応する數(shù)字が含まれています（簡(jiǎn)潔にするために、最初の3文字のみがここで使用されます）。この順序が変更される可能性は低いため、このオブジェクトを意図的に通常のオブジェクトとして保持します。これはパフォーマンスに有益です。テーブル內(nèi)のオブジェクトコンテンツをレンダリングし、ボタンを設(shè)定してB屬性の値を3に変更します。これを行い、オブジェクト

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

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

タイプチェック方法

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

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

IsReactiveは、オブジェクトがReactiveによって作成されたリアクティブプロキシであるか、ReadOnly Reactiveによって作成された別のプロキシを作成することによって作成されるかどうかを確認(rèn)します。
Isreadonlyは、ObjectがReadonlyによって作成された読み取り専用プロキシであるかどうかを確認(rèn)します。
ISProxyは、オブジェクトがReactiveまたはReadonlyによって作成されたプロキシであるかどうかを確認(rèn)します。
• その他のREFメソッド
このグループには、他のrefメソッドが含まれています：

• unrefはrefの値を返します。
• triggerrefは、shallowrefに縛られた効果を手動(dòng)で実行します。
• CustomRefは、依存関係の追跡と更新トリガーを明示的に制御してカスタムREFを作成します。

淺い方法

このグループのメソッドは、REFの「淺い」相當(dāng)、Reactive、およびReadonlyです。
shallowrefは、その値を応答することなく、その値屬性のみを追跡するREFを作成します。
• ShallowReactiveは、獨(dú)自のプロパティのみを追跡し、ネストされたオブジェクトを含めないレスポンシブプロキシを作成します。
• shallowreadonlyは、ネストされたオブジェクトを除く獨(dú)自のプロパティのみを読み取り専用に作成する読み取り専用プロキシを作成します。
次の例を調(diào)べることで、これらの方法をより簡(jiǎn)単に理解しましょう。

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

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

次に、幅と高さのプロパティを含むsettingsa淺い反応性プロキシと、xおよびyプロパティを含むネストされた座標(biāo)オブジェクトを作成します。次に、ビューでは、各プロパティの入力コントロールを設(shè)定します。幅と高さの特性を変更すると、それらが応答的に更新されていることがわかります。しかし、xプロパティとyプロパティを変更しようとすると、それらが追跡されていないことがわかります。
最後に、settingsaと同じプロパティを持つsettingsb淺い読み取りオブジェクトを作成します。ここで、幅または高さの屬性を変更しようとすると、オブジェクトが読み取り専用であり、その屬性を変更できないことを示すコンソールにエラーメッセージが表示されます。一方、XおよびYプロパティは問(wèn)題なく変更できます。

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

変換方法

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

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

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

トロウは、応答性または読み取り専用のプロキシの元の通常のオブジェクトを返します。
• これらの変換が次の例でどのように機(jī)能するかを見(jiàn)てみましょう。
この例では、最初にソースオブジェクトとして使用する基本的な人のレスポンシブオブジェクトを作成します。

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

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

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

  計(jì)算および監(jiān)視方法

  メソッドの最後のセットは、複雑な値を計(jì)算し、特定の値を「監(jiān)視」するために使用されます。

  計(jì)算されたコンピューターは、ゲッター関數(shù)を引數(shù)として受け入れ、不変の応答性REFオブジェクトを返します。
  WatchEffectはすぐに関數(shù)を?qū)g行し、その依存関係を応答的に追跡し、依存関係が変更されたときに再実行します。
  時(shí)計(jì)はこれにまったく同等です。$ watch and Ayplowing watch options of the options api。特定のデータソースを監(jiān)視し、監(jiān)視されているソースが変更されたときにコールバック関數(shù)に副作用を適用しています。
  次の例を考えてみましょう

  この例では、FirstNameおよびLastName Refに基づいて計(jì)算されるFullName Computed変數(shù)を作成します。次に、ビューでは、2つの入力コントロールを追加して、フルネームの2つの部分を編集します。ご覧のとおり、パーツを変更すると、フルネームが再計(jì)算され、結(jié)果が更新されます。

  <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を設(shè)定します。ボリュームが変更されるたびに、効果がコールバック関數(shù)を?qū)g行します。これを証明するために、ビューでは、ボリュームを増加させるボタンを追加します。コールバック関數(shù)に條件を設(shè)定して、ボリュームの値が3で割り切れることができるかどうかをテストします。それがtrueを返すと、アラートメッセージが表示されます。アプリケーションが開(kāi)始されると効果は1回実行され、ボリュームの値を設(shè)定し、ボリュームの値が変更されるたびに再び実行されます。
  最後に、狀態(tài)Refを作成し、その変更を追跡するために時(shí)計(jì)関數(shù)を設(shè)定します。狀態(tài)が変更されると、コールバック関數(shù)が実行されます。この例では、ボタンを追加して、再生と一時(shí)停止の間に狀態(tài)を切り替えます。これが起こるたびに、アラートメッセージが表示されます。
  WatcheffectとWatchは機(jī)能性の點(diǎn)で非常に似ていますが、いくつかの明らかな違いがあります。
  • WatchEffectは、コールバック関數(shù)に含まれるすべてのレスポンシブプロパティを依存関係として扱います。したがって、コールバックに3つのプロパティが含まれている場(chǎng)合、それらはすべて変更のために暗黙的に追跡されます。
  • watchは、コールバックのパラメーターとして含めるプロパティのみを追跡します。さらに、監(jiān)視屬性の以前の値と現(xiàn)在の値を提供します。

  ご覧のとおり、VUE 3レスポンシブAPIは、さまざまなユースケースで使用できる幅広い方法を提供します。 APIは非常に大きく、このチュートリアルでは、基本のみを探ります。詳細(xì)な調(diào)査、詳細(xì)、およびエッジケースについては、レスポンシブAPIドキュメントにアクセスしてください。

  結(jié)論

  この記事では、レスポンシブシステムとは何か、VUE 2およびVUE 3でどのように実裝できるかを紹介します。 Vue 2では、Vue 2が正常に解決されたいくつかの欠點(diǎn)があることがわかります。 VUE 3レスポンシブメカニズムは、最新のJavaScript機(jī)能に基づいた完全な書(shū)き直しです。その長(zhǎng)所と短所を要約しましょう。
  長(zhǎng)所：
  スタンドアロンパッケージとして使用できます。たとえば、Reactで使用できます。
  機(jī)能が豊富なAPIのおかげで、柔軟性と機(jī)能が向上します。
  より多くのデータ構(gòu)造（MAP、WeakMap、Set、WeakSet）をサポートします。
  パフォーマンスが向上します。必要なデータのみが応答性があります。
  VUE 2のデータ操作に関する考慮事項(xiàng)は解決されました。
  短所：
  ES6対応ブラウザでのみ利用できます。
  アイデンティティの比較（===）の観點(diǎn)から、応答性のプロキシは元のオブジェクトと等しくありません。
  VUE 2の「自動(dòng)」レスポンシブメカニズムよりも多くのコードが必要です。
  最終的な行は、VUE 3レスポンシブメカニズムは、VUE開(kāi)発者と非ビュー開(kāi)発者の両方が使用できる柔軟で強(qiáng)力なシステムであるということです。あなたの狀況が何であれ、それをつかんで、驚くべきものを作り始めてください。
  VUE 3レスポンシブシステムFAQ（FAQ）
  VUE 3レスポンシブシステムとは何ですか？
  VUE 3レスポンシブシステムは、人気のJavaScriptフレームワークであるVue.jsの基本的な側(cè)面です。アプリケーション狀態(tài)の変更を追跡し、これらの変更を反映するためにDOM（ドキュメントオブジェクトモデル）を更新する責(zé)任があります。このシステムは、「レスポンシブオブジェクト」の概念を中心に構(gòu)築されています。これらのオブジェクトのプロパティが変更されると、Vueは必要な更新を自動(dòng)的にトリガーします。これにより、開(kāi)発者は動(dòng)的で応答性の高いWebアプリケーションを簡(jiǎn)単に構(gòu)築できます。
  VUE 3レスポンシブシステムはVUE 2とどのように異なりますか？
  VUE 3のレスポンシブシステムは、JavaScriptのプロキシオブジェクトを使用して完全に書(shū)き直されており、VUE 2のObject.DefinePropertyメソッドと比較して、変更を追跡するためのより効率的で強(qiáng)力な方法を提供します。この新しいシステムにより、VUEはネストされたプロパティの変更を追跡できます。これは、VUE 2の制限です。また、メモリフットプリントを削減し、パフォーマンスを向上させます。
  私のアプリケーションでVUE 3応答システムを使用する方法は？
  VUE 3レスポンシブシステムを使用するには、Reactive（）関數(shù)を使用してデータをラップする必要があります。この関數(shù)により、オブジェクトとそのプロパティが応答します。プロパティが変更されると、Vueはコンポーネントに依存するコンポーネントを自動(dòng)的に返信します。また、ref（）関數(shù)を使用して、単一の変數(shù)を応答するものにすることもできます。

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

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

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

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

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

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

  レスポンシブメカニズムのTOREFS機(jī)能は何ですか？

  VUE 3のtorefs（）関數(shù)は、応答性のあるオブジェクトを通常のオブジェクトに変換するために使用されます。元のオブジェクトの各プロパティはrefとして表されます。これは、レスポンシブオブジェクトを分解したいが、それでも応答性を維持する場(chǎng)合に役立ちます。
  VUE 3のオブジェクトが応答するのを防ぐ方法は？
  MarkRaw（）関數(shù)を使用して、オブジェクトが応答しないようにすることができます。これは、Vueがオブジェクトの変更を追跡することを望まない場(chǎng)合に役立ちます。
  VUE 3応答性メカニズムの計(jì)算された関數(shù)は何ですか？

  VUE 3のCOMPUTED（）関數(shù)は、他の応答性に依存するレスポンシブプロパティを作成するために使用されます。依存関係が変更されると、計(jì)算されたプロパティの値が自動(dòng)的に更新されます。これは、基礎(chǔ)となるデータが変更されたときに更新する必要がある計(jì)算または変換に非常に役立ちます。

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

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

以上がVUE 3の新しい反応性システムを理解するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。