# 生命周期与事件

让组件拥有编辑器，在需要时订阅内容、选区和事务变化。

一个页面通常创建一个 Editor 实例，直到用户离开这个页面。编辑器处理每次输入，应用通过事件读取变化，不需要反复创建实例。

## 创建、挂载与退出

Vue 中在 `onMounted` 后创建带视图的 Editor；组件退出时调用 `destroy()`。它会释放编辑视图和扩展资源。应用自己创建的订阅和异步任务，也应在退出时释放或取消。

完整单组件示例见 [Vue 接入](/guide/vue)。如果先创建无视图的实例，后续也可以通过 `mount()` 挂载；`unmount()` 保留正文，`destroy()` 则结束整个实例。

`beforeCreate` 与 `create` 在构造期间同步发生。需要观察创建时机时，通过创建选项的 `onCreate({ editor })` 注册，使用参数里的实例；构造结束后才 `on('create', ...)` 会错过这次事件。View 准备好以后发出 `mount`，释放时发出 `unmount`；切换模式也会经过这两个阶段。

## 选择合适的事件

| 你关心什么 | 订阅什么 | 常见用途 |
| --- | --- | --- |
| 正文改变 | `update` | 标记未保存修改 |
| 选区改变 | `selectionUpdate` | 更新选区相关界面 |
| 接受一次事务 | `transaction` | 统一刷新工具栏状态 |
| 焦点进入或离开 | `focus` / `blur` | 聚焦样式与界面显示 |
| 主视图挂载或释放 | `mount` / `unmount` | 绑定和清理与该视图有关的资源 |

只订阅当前功能需要的事件。光标移动并不等于正文变化，也不需要立即序列化和保存全文。

## 保留监听函数以便释放

```ts [注册并移除同一个函数]
import type { QuireEditorUpdateEvent } from '@quirekit/core'

const onUpdate = ({ editor, previousState }: QuireEditorUpdateEvent) => {
  if (!previousState.doc.eq(editor.state.doc)) dirty = true
}
editor.on('update', onUpdate)

// 页面退出时移除应用自己的监听：
editor.off('update', onUpdate)
```

这里的 `dirty` 是应用维护的“有未保存修改”状态。`setEditable()` 默认也会发出 `update`，因此先比较文档，避免只读切换被当成编辑。`emitUpdate: false` 的内容替换不会触发它，恢复流程需自行设置基线。不要在 `update` 中无条件 `setContent()`，否则会反复替换用户正在编辑的内容。

`transaction` 包含根事务与 `appendedTransactions`，回调中的 `editor.state` 是接受插件追加事务后的状态。只看根事务的 `docChanged` 会漏掉追加事务中的修改；也不能把每个事务都当作需要保存的正文变化。完整事件表见[配置与事件参考](/api/options)。

## 异步结果也有生命周期

加载插件、文件或保存结果返回时，先检查页面和对应任务是否仍有效。较早的结果不能覆盖新草稿，也不能在组件卸载后重新创建实例。

Classic 的产品配置更新与 Core 的内容 `update` 不是同一件事，复用产品时另见 [Classic 配置](/classic/configuration)。