Vue の応答データ原則と Vue.set と Vue.$set の違い

Vue は、現在のフロントエンド分野で人気のある開発フレームワークであり、データ変更を通じてビューの更新をトリガーできるコア メカニズムの 1 つは応答性データです。この記事では、Vue のリアクティブ データの原理を詳しく説明し、Vue.set と Vue.$set の違いについて説明します。

1. Vue の応答データの原則

Vue は最初にデータ ソースをハイジャックします。データ ソースを定義するには、次の 3 つの条件を満たす必要があるだけです: オブジェクトが空ではない、およびオブジェクトはフリーズまたはシールされたオブジェクトではありません。オブジェクトは Vue インスタンスそのものではありません。必要なオブジェクトが条件を満たしている場合、Vue はオブジェクトに Observe インスタンスを追加します。Observe インスタンスはオブジェクトの各プロパティに Dep インスタンスを追加します。プロパティ値がオブジェクトの場合、プロパティの Dep インスタンスはそのオブジェクトになります。 Dep インスタンス: 値ごとに Dep インスタンスを追加します。これにより、プロパティのバインドが可能になります。

Vue インスタンスのデータを変更するとき、Vue はゲッターとセッターを介してデータの読み取りおよび書き込み操作をインターセプトし、それによってプロパティ値の更新をトリガーします。セッター操作は Dep インスタンスに通知します。このプロパティは通知の更新に属しており、これによりビューの更新がトリガーされます。これが、Vue がレスポンシブ データを実装する方法です。

2. Vue.set と Vue.$set

Vue では、data 内のデータを変更し、v-model を通じてビューにバインドすることがよくあります。データが変更されると、Vue はビューを自動的に更新できます。ただし、オブジェクト データを変更する場合は、Vue が提供する Vue.set メソッドまたは Vue.$set メソッドを使用して、応答性の高いデータ更新を実現する必要があります。

Vue.set と Vue.$set の使用法は一貫しています。 Vue.set(target, key, value) のターゲットは変更するオブジェクト、key は属性名としてのオブジェクト、value は属性値です。 Vue.set を使用すると、Vue はオブジェクトに新しい属性を追加します。この属性は key という名前で、その値は value です。

Vue.$set(target, key, value) もオブジェクトの属性値を変更するために使用されますが、Vue.$set と Vue.set の違いは、Vue.$set が次のいずれかを決定することです。オブジェクトは応答です 応答しない場合、Vue.$set はオブジェクトを応答オブジェクトに変換します。これにより、オブジェクトがビューの更新を正常にトリガーできることが保証されます。

オブジェクト データを変更するときに、obj.property = value を直接使用して変更すると、Vue はこのデータの変更を検出せず、ビューの更新をトリガーしないことに注意してください。したがって、オブジェクト タイプのデータを変更する場合は、必ず Vue.set メソッドまたは Vue.$set メソッドを使用してください。

以上がVue の応答データ原則と Vue.set と Vue.$set の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。