Vue オブジェクトの変更がレンダリングされない-フロントエンドQ&A-php.cn

Vue オブジェクトの変更がレンダリングされない

王林

リリース： 2023-05-17 21:21:36

オリジナル

1109 人が閲覧しました

はじめに

Vue.js は、シンプルで使いやすいフレームワークを提供し、ユーザーに効率的なデータバインディングとコンポーネントプログラミング方法を提供する人気の JavaScript ライブラリです。ただし、Vue.js を使用して開発を行うと、いくつかの問題が発生することがあります。よくある問題の 1 つは、コンポーネントのデータオブジェクトが変更されたときにコンポーネントが再レンダリングされず、その結果インターフェイスが変更されないことです。この記事では、この問題の原因とその解決方法について説明します。

本文

Vue.js の核となる考え方はデータ駆動型ビューです。データオブジェクトが変更されると、ビューが自動的に更新されます。これは、Vue.js のリアクティブシステムによって実現されます。 Vue.js は、コンポーネント定義時にすべてのデータオブジェクトをリアクティブシステムに追加します。データオブジェクトのプロパティが変更されると、リアクティブシステムはその変更を自動的に検出し、ビューに更新するよう通知します。

ただし、データオブジェクトのプロパティが変更されたときにビューが再レンダリングされないという問題が発生することがあります。この場合、問題の原因を注意深く分析し、解決策を見つける必要があります。

まず、オブジェクトのプロパティを変更するとき、Vue.js はオブジェクトの直接のプロパティのみを検出することを明確にする必要があります。新しいプロパティをオブジェクトに追加すると、Vue.js はプロパティの変更を検出しません。これは、新しく追加されたプロパティがリアクティブシステムに追加されないためです。

たとえば、次のコードでは、新しいプロパティ newProp をオブジェクトに追加します。

const vm = new Vue({
  data: {
    obj: {
      prop1: 'value1',
      prop2: 'value2'
    }
  }
})

vm.obj.newProp = 'new value'

ログイン後にコピー

newProp が追加されていないため、応答性の高いシステムでは、newProp の値を変更しても、ビューは再レンダリングされません。

この問題を解決するには、Vue.js が提供する $set メソッドを使用して、応答システムに新しいプロパティを追加します。

vm.$set(vm.obj, 'newProp', 'new value')

ログイン後にコピー

この方法では、 newProp の値が変更されると、ビューは自動的に再レンダリングされます。

新しいプロパティが検出されないことに加えて、配列内の要素を直接変更した場合にも同様の問題が発生します。たとえば、次のコードでは、配列 arr 内の要素を直接変更します。

const vm = new Vue({
  data: {
    arr: ['elem1', 'elem2', 'elem3']
  }
})

vm.arr[1] = 'new elem2'

ログイン後にコピー

Vue.js は配列内の要素の変更を検出しないため、ビューは再レンダリングです。

この問題を解決するには、Vue.js が提供する $set メソッドを使用して、元の要素を変更された要素に置き換えます。ちなみに、配列内の要素が変更されると、ビューも自動的に再レンダリングされます。

さらに、場合によってはビューを手動で強制的に更新する必要があることにも注意する必要があります。たとえば、計算プロパティまたはリスナーを使用する場合、計算プロパティまたはリスナーの値が変更されてもビューは自動的に更新されません。

$forceUpdate

メソッドを使用してビューを強制的に更新する必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>vm.$set(vm.arr, 1, 'new elem2')</pre><div class="contentsignin">ログイン後にコピー</div></div>summary<p>Vue.js の開発プロセス中に、コンポーネントデータオブジェクト、コンポーネント再レンダリングの問題がない場合、次の点を考慮する必要があります: </p> <p></p>新しい属性と配列要素は Vue.js の応答システムによって無視されます。 <ul>$set<li> メソッドを使用してそれらをリアクティブシステムに追加します;<code>計算されたプロパティまたはリスナーを使用する場合、計算されたプロパティまたはリスナーの値が変更されてもビューは自動的に更新されません。 $forceUpdate

メソッドを使用する必要があるため、ビューが強制的に更新されます。

上記の方法は、コンポーネントデータオブジェクトが変更されたときにレンダリングされない問題を解決するのに役立ちます。ただし、Vue.js の応答システムの原則に従い、それがもたらす利便性を最大限に活用する必要があります。問題が発生した場合は、問題を直接回避するのではなく、その原因を注意深く分析し、解決策を見つけてください。

以上がVue オブジェクトの変更がレンダリングされないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。