データをリアクティブにしている場合に、リアクティブなデータのプロパティなどへの割り当てを行うと正しく動作できない – MESCIUS ナレッジベース

作成日: 2024/03/06 最終更新日: 2026/02/04

文書種別

制限事項

発生環境

Vue3で発生

状況

修正済み

詳細

Composition APIを利用してデータをリアクティブにしている場合に、リアクティブなデータのプロパティなどへの割り当てを行うと正しく動作できない場合があります。
Vueのドキュメントでも下記注記の通り、3rdパーティのコンポーネント等はリアクティブにしないことを推奨しています。
------------------------------------------------------------
Use with Caution
・Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.

------------------------------------------------------------

回避方法

この制限事項はバージョン5.20252.44で機能改善されました。

修正版を適用しない場合の回避方法は次の通りです。

markRawメソッドまたはtoRawメソッドのいずれかを使用して回避できます。

import { toRaw, markRaw} from "vue";
・・・

  methods: {
    initGrid: function (grid) {
      // 回避方法１
      // markRawメソッドを使用して、オブジェクトをプロキシに変換しないようマークします。
      this.selector = markRaw(new Selector(grid))
      this.selector.column = grid.columns[0];


      // 回避方法２
      // toRawメソッドを使用して、Vueで作成されたプロキシの元のオブジェクトを取得します。
      this.selector = new Selector(grid);
      toRaw(this.selector).column = grid.columns[0];
    }
  },