Интеграция в Vue

Если вы ищете информацию о том, как использовать компоненты Vue в качестве пользовательских компонентов, обратитесь к этому разделу.

Перед интеграцией Univer в проект Vue прочитайте раздел установки и базовой настройки и ознакомьтесь с компонентами Vue и хуками их жизненного цикла.

Vue 3.x

Примечания перед интеграцией

Не создавайте прокси для экземпляров Univer и FUniver: это может привести к непредсказуемым ошибкам или проблемам с производительностью.

Этапы интеграции

Инициализируйте Univer в хуке onMounted
Уничтожьте Univer в хуке onBeforeUnmount

Пример

Vue

<script lang="ts" setup>import type { Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-docs-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nullonMounted(() => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.EN_US,    locales: {      [LocaleType.EN_US]: mergeLocales(        UniverPresetDocsCoreEnUS,      ),    },    presets: [      UniverDocsCorePreset({        container: container.value as HTMLElement,      }),    ],  })  univerAPI.createDocument({})  univerInstance = univer})onBeforeUnmount(() => {  univerInstance?.dispose()  univerInstance = null})</script><template>  <div ref="container" style="height: 600px" /></template>

Vue 2.x

Примечания перед интеграцией

При установке @univerjs/presets с помощью pnpm может потребоваться вручную установить react и react-dom.
Если в среде разработки появляется предупреждение "ResizeObserver loop limit exceeded", его можно проигнорировать или устранить с помощью приведённого ниже фрагмента кода:

TypeScript

if (process.env.NODE_ENV === 'development') {  const _ResizeObserver = window.ResizeObserver  function debounce(fn, delay) {    let timer = null    return function () {      if (timer) {        clearTimeout(timer)      }      timer = setTimeout(() => {        fn.apply(this, arguments)      }, delay)    }  }  window.ResizeObserver = class ResizeObserver extends _ResizeObserver {    constructor(callback) {      callback = debounce(callback, 50)      super(callback)    }  }}

Этапы интеграции

Инициализируйте Univer в хуке mounted
Уничтожьте Univer в хуке beforeDestroy

Пример

Vue

<script>import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetDocsCoreEnUS,        ),      },      presets: [        UniverDocsCorePreset({          container: this.$refs.container,        }),      ],    })    univerAPI.createDocument({})    this.univerInstance = univer  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

Насколько полезно это руководство?