作成日: 2023/09/20    最終更新日: 2023/09/20

文書種別

制限事項

詳細

Vue3でSpreadJSのインスタンスにアクセスするとproxyオブジェクトが返却されます。
従来のSpreadオブジェクトをプロパティにラップするため、パフォーマンスの低下が発生します。

回避方法

以下のいずれかの方法でパフォーマンスの低下を回避できます。

１．findControlを使用してSpreadJSインスタンスを取得する

GC.Spread.Common.CultureManager.culture('ja-jp');

const spreadRef = ref(null);

let initSpread = function (spread) {
    spreadRef.value = spread.getHost();
    let sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "test");
}

let handleClick = function () {
    let spread = GC.Spread.Sheets.findControl(spreadRef.value);
    const startTime = Date.now();
    spread.suspendPaint();
    spread.resumePaint();
    console.log(spread);
    console.log(Date.now() - startTime);
}

２．リアクティビティAPIを使用して、未加工のオブジェクトを取得する

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import { ref, toRaw } from "vue";
import "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets-resources-ja";

GC.Spread.Common.CultureManager.culture('ja-jp');

const spreadRef = ref(null);

let initSpread = function (spread) {
    spreadRef.value = spread;
    let sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "test");
}

let handleClick = function () {
    let spread = toRaw(spreadRef.value);
    const startTime = Date.now();
    spread.suspendPaint();
    spread.resumePaint();
    console.log(spread);
    console.log(Date.now() - startTime);
}