vueがオブジェクトをリッスンできない理由は何ですか

はじめに

Vue.js の開発では、Vue.js の中核機能の 1 つである双方向データ バインディングがよく使用されます。ただし、Vue インスタンスでオブジェクトを作成し、そのオブジェクトに新しいプロパティを追加すると、Vue がプロパティの変更を検出しない場合があります。この記事では、この問題について詳しく説明します。

この記事では、次の質問について検討します:

1. Vue オブジェクトはどのような状況でプロパティの変更をリッスンできますか?
2. どのような状況で Vue がオブジェクトの変更を検出できない可能性がありますか?
3. Vue はオブジェクトをリッスンできない問題をどのように解決しますか?

Vue オブジェクトはどのような状況でプロパティの変更を検出できますか?

Vue.js では、Vue オブジェクトのインスタンス化時に定義されたプロパティのみがリアクティブです。例:

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

最初から Vue インスタンスにオブジェクトや配列などの複雑なデータ型を定義すると、オブジェクト内のプロパティや配列内の項目は自動的にリアクティブ プロパティになります。 。

例:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

Vue.js は Vue インスタンスの Object.defineProperty() メソッドを使用してオブジェクト内のプロパティをゲッター/セッターに変換するため、オブジェクトのプロパティは次のようになります。検出されました。

どのような状況で Vue がオブジェクトの変更を検出できない可能性がありますか?

上記では、複雑なデータ型が Vue インスタンスで定義されている場合、オブジェクト内のプロパティまたは配列内の項目が自動的に応答性の高いプロパティになると述べました。ただし、新しいプロパティをオブジェクトに追加すると、Vue はそのプロパティの変更をリッスンできません。

例:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

Vue.js は、Vue オブジェクトのインスタンス化時に定義されたプロパティのみをリッスンし、後で追加されたプロパティはリッスンしないため、Vue は新しく追加されたプロパティの変更をリッスンできません。つまり、実行時に新しいプロパティを追加するときは、Vue.set() メソッドを使用して新しいプロパティを追加し、それをリアクティブにする必要があります。例:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

Vue はオブジェクトをリッスンできない問題をどのように解決しますか?

Vue.set() メソッドを使用して新しいプロパティを追加し、それをリアクティブにする以外にも、オブジェクトをリッスンできない問題を解決する方法があります。

1. Vue インスタンス化でのすべてのプロパティの定義

Vue インスタンスの作成後に新しいプロパティを追加しないようにする最善の方法は、Vue インスタンス化ですべてのプロパティを定義することです。例:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

2. Vue.observable() メソッドを使用します

Vue.observable() メソッドは、応答オブジェクトをパラメータとして受け取り、応答オブジェクト オブジェクトを返します。 。 (このメソッドは Vue 2.6.0 バージョンで新しく追加されたものであることに注意してください)。例:

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

結論

Vue.js 開発では、双方向データ バインディング機能が非常に重要です。ただし、Vue オブジェクトを使用する場合は、次の点に注意する必要があります。

1. Vue オブジェクトのインスタンス化時に定義されたプロパティのみが応答します。
2. 新しいプロパティをオブジェクトに追加すると、Vue はプロパティの変更をリッスンできません。
3. 新しいプロパティを追加して応答性を持たせる必要がある場合は、Vue.set() メソッドを使用します。
4. Vue 2.6.0 などの新しいバージョンの Vue では、Vue.observable() メソッドを使用してオブジェクトを応答性の高いオブジェクトに変換できます。

レスポンシブ プロパティを正しく使用できる場合、Vue.js はシンプルでコンパクトなコード、直感的な UI、より優れたユーザー エクスペリエンスを提供します。

以上がvueがオブジェクトをリッスンできない理由は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。