vue3 オブジェクトのプロパティの変更

Vue3 の正式リリースにより、開発者は新しいバージョンによってもたらされる新機能と改善点を試すのが待ちきれません。最も顕著な変更の 1 つは、オブジェクトのプロパティの変更です。 Vue2 では、オブジェクトのプロパティの変更を監視したい場合は、詳細な監視を使用するか、$watch を使用してプロパティの変更を手動で監視する必要があります。しかし、Vue3 ではこの問題は解決されました。

Vue3 は、Proxy オブジェクトを使用して、オブジェクト プロパティの変更に対する自動監視および応答メカニズムを提供します。これは、Vue3 のオブジェクトを通常の JavaScript オブジェクトと同じように操作でき、ビューの更新を自動的にトリガーできることを意味します。

具体的な実装の詳細を見てみましょう。

まず、内部に状態オブジェクトを含む Vue3 コンポーネントがあり、オブジェクトのプロパティの変更をリッスンしたいとします。このオブジェクトを定義し、コンポーネントの状態に割り当てることができます。

<template>
  <div>
    <p>属性A: {{ obj.A }}</p>
    <p>属性B: {{ obj.B }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  }
}
</script>

Vue2 では、オブジェクトのプロパティの変更を監視したい場合は、$watch または $watchEffect を使用して各プロパティを手動で監視する必要があります。 。 バラエティ。例:

this.$watch('obj.A', (newValue, oldValue) => {
  console.log(`属性A发生了变化：${oldValue} => ${newValue}`)
})

Vue3 では、$watch や $watchEffect を書かなくても、Proxy オブジェクトを使用してターゲット オブジェクトのすべてのプロパティの変更をリッスンできます。

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  },
  created() {
    this.obj = new Proxy(this.obj, {
      set(target, key, value, receiver) {
        // 触发视图更新
        return Reflect.set(target, key, value, receiver)
      }
    })
  }
}
</script>

コンポーネントを作成するとき、オブジェクトが Proxy オブジェクトにラップされる状態を設定します。オブジェクトのプロパティを変更すると、Proxy オブジェクトはビューの更新を自動的にトリガーします。

Proxy オブジェクトの set 関数は、オブジェクトのプロパティが変更されると自動的に呼び出されます。この時点で、プロパティの変更を出力したり、他のコンポーネントに通知したりするなど、独自のロジックを set 関数に追加できます。ただし、制御フローが Vue 更新メカニズムに戻り、ビューが正しく更新されるように、Reflect.set(target, key, value, レシーバー) ステートメントが最後に返されるようにする必要があります。

上記の例は単なる単純なデモンストレーションです。Vue3 の Proxy オブジェクトには、カスタムのゲッターとセッター、プロパティのアクセス許可の確認など、より柔軟なオブジェクト プロパティの監視のための追加の機能とオプションが実装されています。興味のある開発者は、Vue3 の公式ドキュメントを参照して詳しく調べることができます。

つまり、Vue3 の Proxy オブジェクトを使用すると、コンポーネント内のオブジェクトをより自然に操作できるようになり、プロパティの変更を手動で監視するための煩わしいコードの量も削減されます。これにより、開発により効率的で便利なエクスペリエンスがもたらされます。

以上がvue3 オブジェクトのプロパティの変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。