プロキシとdefinePropertyの違い

変更可能な概念

その前に、まず、mutable

mutable は可変型のオブジェクトを表します。内部データ値を変更できる操作を提供し、その内部値を再度変更できます。

Vue は可変データソースをコアコンセプトとして使用し、UI 変更全体の更新を実現します。

	mutable (可変型)	immutable (不変型)
アドバンテージ	データのコピー数を減らして効率化	内部データは不変であるため、より安全になり、同期の問題を考慮する必要なく、マルチスレッド共有オブジェクトとして使用できます。
欠点	内部データが変動し、リスクが高まる	内部データは不変であり、頻繁に変更すると大量の一時コピーが生成され、スペースが無駄になります

最も簡単な方法は、データを初期化してページを生成し、ソースデータを直接変更して更新をトリガーし、ページを再レンダリングすることです。

二 defineProperty

obj.a = 1vue2 を使用していると、新しいオブジェクトプロパティを追加しても vue2 によってハイジャックされないため、vue2 が提供するメソッドを使用して$set更新する必要があるという問題に遭遇することがよくあります。

オブジェクト a にプロパティを追加すると、対応するオブジェクトに新しいプロパティが正常に生成されますが、vue2 は defineProperty のセッターとゲッターを介してデータをハイジャックし、新しく追加されたデータはハイジャックされないためです。まだ再レンダリングされません

(これは、defineProperty が現在のオブジェクトのプロパティの 1 つしかハイジャックできないためです)

const a = {
    b: 1,
};
Object.defineProperty(a, 'b', {
    set: function() {},
    get: function() {},
});

3 プロキシ

vue3 では、データプロキシにプロキシを使用しても、この懸念はまったくありません。

データプロキシのプロキシは、新しい属性に応答できます。新しい属性が追加されると、現在のオブジェクトの取得とプロキシに応答できます。

const p = new Proxy({
    a: 1,
    b: 2,
}, {
    get: function(obj, value) {
        console.log('get', obj, value);
        return Reflect.get(obj, value);
    },
    set: function(obj, prop, value) {
        console.log('set', obj, prop, value);
        return Reflect.set(obj, prop, value);
    },
})