Object.assignおよびVueでの応用テクニック
2047 ワード
最近コードを見ているうちに同僚に教えてもらいました.
Object.assign()
オブジェクトのコピー
オブジェクトのマージ
なお、同じ属性を持つオブジェクトは、同じ名前の属性で、後ろのものが前のものを上書きします.
Vueでの使い方
Object.assign()
Object.assign()
メソッドは、列挙可能なすべての属性の値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用される.ターゲットオブジェクトが返されます.// 1 , 。 。 [[Get]] [[Set]], getter setter。
Object.assign(target, ...sources)
オブジェクトのコピー
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
Object.assign()
は浅いコピーであることに注意してください.オブジェクトのマージ
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 。
なお、同じ属性を持つオブジェクトは、同じ名前の属性で、後ろのものが前のものを上書きします.
Vueでの使い方
Object.assign()
には上記の特性があるため、Vueコンポーネントでは、ある場合、Vueコンポーネントのdataデータをリセットする必要があるという需要がある可能性があります.このとき、現在の状態のdataをthis.$data
で取得し、このコンポーネントの初期状態のdataをthis.$options.data()
で取得することができる.そしてObject.assign(this.$data, this.$options.data())
を使えば現在の状態のdataを初期状態にリセットできるので便利です!