Vueデータハイジャックを解決する方法

Vue データハイジャックを解決するにはどうすればよいですか?

Vue は、SPA (シングル ページ アプリケーション) 開発によく使用される、非常に人気のあるフロントエンド フレームワークであり、その中心的な機能の 1 つは、データ バインディングを使用してコンポーネント開発を実現するデータ バインディング (データ駆動型) です。 。

データ バインディングは Vue フレームワークの中核機能の 1 つであり、Vue はデータ ハイジャック テクノロジを使用して双方向のデータ バインディングを実現します。 Vue では、データ モデル内のデータを変更すると、ビューが自動的に更新され、その逆も同様です。しかし、データハイジャックによって引き起こされる問題をどのように解決すればよいでしょうか?

Vue データ ハイジャックの原理

Vue が双方向データ バインディングを使用すると、データがハイジャックされます。たとえば、テンプレートで二重括弧 ({{}}) を使用します。以下に示すように、データをバインドします。

<div>
  {{message}}
</div>

Vue では、このバインディング メソッドは「テンプレート バインディング」と呼ばれ、Vue はこのバインディング メソッドをすべて「テンプレート コンパイル フェーズ」で使用します。JavaScript コードを次のように置き換えます。 :

var data = { message: 'Hello,Vue!' };  
var app = new Vue({
  el: '#app',
  data: data
});

このコードは、定義したデータ オブジェクト内のすべてのプロパティを Vue インスタンスに転送し、次のコードを実行します:

Object.keys(data).forEach(key => {
  proxyData(this, key, data[key]);
});

このうち、proxyData メソッドはカスタム メソッドです。 、主にデータハイジャックを実装するために使用されます。データハイジャックは主に Vue インスタンス オブジェクトに反映されます。

具体的なハイジャック プロセスは次のとおりです。

1. Vue は Object.defineProperty() メソッドを使用して、データ オブジェクトのすべてのプロパティをハイジャックします。

function proxyData (vm, key, val) {
  Object.defineProperty(vm, key, {
    configurable: false,
    enumerable: true,
    get () {
      console.log(`get ${val}`);
      return val;
    },
    set (newVal) {
      console.log(`set ${newVal}`);
      val = newVal;
      // 触发diff算法 - 更新页面
      vm.$nextTick(() => {
        // 触发更新
      });
    }
  });
}

2. get 関数で、Vue はオブザーバー オブジェクトをサブスクライバー キューに追加します。データが変更されると、オブザーバー オブジェクトに通知され、UI が更新されます。
3. set 関数では、Vue はデータ変更をオブザーバー オブジェクトに通知し、オブザーバー オブジェクトは UI を再レンダリングします。
4. Vue は仮想 DOM (Virtual DOM) を使用して効率的な DOM 操作を実現し、DOM の直接操作によって生じるパフォーマンスのボトルネックを回避します。

Vue データ ハイジャックの問題

Vue はデータ ハイジャックを通じて双方向のデータ バインディングを実装しますが、この方法にはいくつかの問題もあります。

1. オブジェクトの新しい属性は監視できません

Vue を使用したところ、データ モデル内のオブジェクトに新しい属性を追加すると、この属性は監視できません。つまり、このプロパティを変更してもビューの再レンダリングはトリガーされません。オブジェクトの初期化時に存在するプロパティのみを観察できます。

var app = new Vue({
  el: '#app',
  data: {
    obj: { a: 1, b: 2 }
  }
});

// 需要新增c属性
app.obj.c = 3;

// 修改c属性，视图不会更新
app.obj.c = 4;

2. 配列操作は監視できません

Vue では、プッシュ、ポップ、シフト、シフト解除操作などの配列の変更を監視できません。Vue を使用できるのは特別なメソッドを提供する場合だけです。 Vue.set() や Vue.delete() などの変更を加えます。

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  }
});

// 只能使用Vue提供的特殊方法进行数组的操作
 Vue.set(app.arr, 3, 4);

このような操作は明らかに不便です。この問題を解決するにはライブラリを使用します。このライブラリの名前は vuex です。

Vuex は、Vue 用に特別に開発された状態管理ライブラリです。データ モデルを一元管理し、複数のコンポーネント間で同じ状態を共有できるため、Vue での状態管理が容易になります。

Vuex を介して、共有データを持つ複数のコンポーネントをツリー構造の状態マネージャーに分割できます。コンポーネントが特定の属性を変更したい場合、アクションを送信して間接的にミューテーションをローカルでトリガーする方法です。 Mutation が変更できるのは State です。State が変更されると、この State に依存するすべてのコンポーネントが自動的に更新されます。

3. 長いリストのパフォーマンスの問題

Vue では、長いリストがある場合、データの 1 つが変更されると、リスト全体のすべてのデータが変化します。データはすべて再レンダリングされるため、パフォーマンスの問題が発生する可能性があります。この問題を解決するために、Vue には key 属性が用意されており、リスト内の各オブジェクトにキー値を与えることができるため、データが変更されたときに、リスト全体ではなく、変更された項目のみが再レンダリングされます。

<template>
  <div>
    <li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
  </div>
</template>

概要

Vue はデータ ハイジャックを使用して双方向データ バインディングを実装しますが、この方法では、オブジェクトの新しいプロパティを監視できない、変更を処理できないなど、いくつかの問題が発生します。配列で待機します。ただし、Vue ではこれらの問題を解決する方法は数多くあります。たとえば、キー属性を使用してリストのレンダリングのパフォーマンスを向上させたり、Vuex を状態管理に使用したりするなどです。 Vue データのハイジャックが引き起こす可能性のある問題を解決するには、最も適切な方法を選択する必要があります。

以上がVueデータハイジャックを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。