[解決済み] vm.setとVue.setの違いは何ですか?
質問
Vueのドキュメントを注意深く読み直しました。 "リアクションの深層"。 のAPIと vm.$set と Vue.セット が、いつどちらを使えばいいのか、まだ判断に迷っています。 私の現在のLaravelプロジェクトでは、オブジェクトに多くのプロパティを動的に設定するため、この2つを区別できるようにすることが重要なのです。
ドキュメントでは、vm.setは"For Vue instance"、Vue.setは"For plain data objects"、Vue.setはグローバルという言葉で分けられているようです。
しかし、プロパティを追加して、それを反応させる方法があります。 インスタンスが作成されました。
Vueインスタンスの場合、$set(path, value)インスタンスメソッドを使用することができます。
vm.$set('b', 2)
// `vm.b` and `data.b` are now reactive
プレーンなデータオブジェクトの場合、グローバルなVue.set(object, key.) を使用することができます。 値) メソッドを使用します。
Vue.set(data, 'c', 3)
// `vm.c` and `data.c` are now reactive
最後に、上記の3番目のオプション(一度に複数のプロパティを追加するためのもの)は、上記の2つのオプションのいずれかと同等の代用品として使用できるでしょうか(複数の代わりに1つのプロパティだけを追加することで)。
に対して、複数のプロパティを割り当てたい場合があります。 例えば Object.assign() や _.extend() を使って、既存のオブジェクトを拡張します。 しかし、オブジェクトに追加された新しいプロパティは、変更をトリガーしません。 このような場合は、新しいオブジェクトを作成し、そのオブジェクトのプロパティを追加します。 元のオブジェクトとミキシンオブジェクト
// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
解決方法は?
Vue.setの導入に伴うリリースノートはこちらです。
<ブロッククオートVue は Object.prototype を拡張し、$set と $delete メソッドを持たなくなりました。 これは、これらのメソッドに依存しているライブラリで問題を引き起こしています。 プロパティを使用することがあります (例: Meteor の minimongo)。 object.$set(key, value)やobject.$delete(key)の代わりに、object.delete(key)を使用します。 新しいグローバルメソッド Vue.set(object, key, value) と Vue.delete(object, キー) を使用します。
だから
.$set
で利用可能でした。
すべて
オブジェクトに適用されます - 現在はビューモデル自身でのみ利用可能です。
Vue.set
は、リアクティブオブジェクトへの参照はあるが、それが属しているビューモデルへの参照がない場合に使用されます。
関連
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み】JavaScript版sleep()とは?)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400