vue3 中的setup语法糖中 使用handsontable创建一个带有HyperFormula的表格模板，并获取到HyperFormula的设置数据

首先需要安装handsontable和HyperFormula：

npm install handsontable @hyperformula/hyperformula

然后在组件中使用以下代码：

<template>
  <div ref="hot"></div>
</template>

<script>
import Handsontable from 'handsontable'
import { HyperFormula } from '@hyperformula/hyperformula'

export default {
  setup() {
    const hotInstance = Handsontable.core.build(document.querySelector('#hot'))

    const hf = HyperFormula.buildEmpty({
      licenseKey: process.env.VUE_APP_HYPERFORMULA_LICENSE_KEY
    })

    const data = [
      ['', 'A', 'B', 'C'],
      [1, '=7+3', '=SUM(A2:B2)', '=A2*B2']
    ]

    hotInstance.loadData(data)

    return {
      hot: hotInstance,
      hf
    }
  },
  mounted() {
    const hot = this.hot
    const hf = this.hf

    hf.addSheet('Sheet1')
    hf.setCellContents({ sheet: 'Sheet1', row: 1, col: 2 }, '=2+2')
    hf.recompute()

    hot.addHook('afterChange', function () {
      const value = hot.getDataAtCell(1, 0)
      const result = hf.getCellValue({ sheet: 'Sheet1', row: 1, col: 2 })

      console.log(`Value: ${value}, Result: ${result}`)
    })
  },
  beforeUnmount() {
    this.hot.destroy()
  }
}
</script>

在setup函数里创建Handsontable实例和HyperFormula实例，并且在手动调用`hotInstance.loadData(data)`方法加载数据之前设置HyperFormula的表达式等内容，然后把这两个实例作为返回值暴露出去。

在mounted钩子函数里面，指定HyperFormula的工作表名称并设置单元格的内容，然后手动调用`hf.recompute()`重新计算表格中的内容。同时，使用Handsontable的`afterChange`钩子函数监听数据变化，并调用`hf.getCellValue`方法获取计算结果，并输出到控制台。

最后，在组件销毁前销毁Handsontable实例以释放资源。