[{"data":1,"prerenderedAt":423},["ShallowReactive",2],{"quirekit-doc:\u002Fconcepts\u002Flifecycle":3},{"id":4,"title":5,"body":6,"description":413,"extension":414,"keywords":415,"locale":416,"meta":417,"navigation":216,"order":220,"path":418,"section":419,"seo":420,"stem":421,"__hash__":422},"docs\u002Fconcepts\u002Flifecycle.zh-CN.md","生命周期与事件",{"type":7,"value":8,"toc":407},"minimark",[9,13,18,30,50,76,79,172,175,178,340,365,387,390,393,403],[10,11,12],"p",{},"一个页面通常创建一个 Editor 实例，直到用户离开这个页面。编辑器处理每次输入，应用通过事件读取变化，不需要反复创建实例。",[14,15,17],"h2",{"id":16},"创建挂载与退出","创建、挂载与退出",[10,19,20,21,25,26,29],{},"Vue 中在 ",[22,23,24],"code",{},"onMounted"," 后创建带视图的 Editor；组件退出时调用 ",[22,27,28],{},"destroy()","。它会释放编辑视图和扩展资源。应用自己创建的订阅和异步任务，也应在退出时释放或取消。",[10,31,32,33,38,39,42,43,46,47,49],{},"完整单组件示例见 ",[34,35,37],"a",{"href":36},"\u002Fguide\u002Fvue","Vue 接入","。如果先创建无视图的实例，后续也可以通过 ",[22,40,41],{},"mount()"," 挂载；",[22,44,45],{},"unmount()"," 保留正文，",[22,48,28],{}," 则结束整个实例。",[10,51,52,55,56,59,60,63,64,67,68,71,72,75],{},[22,53,54],{},"beforeCreate"," 与 ",[22,57,58],{},"create"," 在构造期间同步发生。需要观察创建时机时，通过创建选项的 ",[22,61,62],{},"onCreate({ editor })"," 注册，使用参数里的实例；构造结束后才 ",[22,65,66],{},"on('create', ...)"," 会错过这次事件。View 准备好以后发出 ",[22,69,70],{},"mount","，释放时发出 ",[22,73,74],{},"unmount","；切换模式也会经过这两个阶段。",[14,77,78],{"id":78},"选择合适的事件",[80,81,82,98],"table",{},[83,84,85],"thead",{},[86,87,88,92,95],"tr",{},[89,90,91],"th",{},"你关心什么",[89,93,94],{},"订阅什么",[89,96,97],{},"常见用途",[99,100,101,115,128,141,158],"tbody",{},[86,102,103,107,112],{},[104,105,106],"td",{},"正文改变",[104,108,109],{},[22,110,111],{},"update",[104,113,114],{},"标记未保存修改",[86,116,117,120,125],{},[104,118,119],{},"选区改变",[104,121,122],{},[22,123,124],{},"selectionUpdate",[104,126,127],{},"更新选区相关界面",[86,129,130,133,138],{},[104,131,132],{},"接受一次事务",[104,134,135],{},[22,136,137],{},"transaction",[104,139,140],{},"统一刷新工具栏状态",[86,142,143,146,155],{},[104,144,145],{},"焦点进入或离开",[104,147,148,151,152],{},[22,149,150],{},"focus"," \u002F ",[22,153,154],{},"blur",[104,156,157],{},"聚焦样式与界面显示",[86,159,160,163,169],{},[104,161,162],{},"主视图挂载或释放",[104,164,165,151,167],{},[22,166,70],{},[22,168,74],{},[104,170,171],{},"绑定和清理与该视图有关的资源",[10,173,174],{},"只订阅当前功能需要的事件。光标移动并不等于正文变化，也不需要立即序列化和保存全文。",[14,176,177],{"id":177},"保留监听函数以便释放",[179,180,186],"pre",{"className":181,"code":182,"filename":183,"language":184,"meta":185,"style":185},"language-ts shiki shiki-themes github-light github-light github-dark","import type { QuireEditorUpdateEvent } from '@quirekit\u002Fcore'\n\nconst onUpdate = ({ editor, previousState }: QuireEditorUpdateEvent) => {\n  if (!previousState.doc.eq(editor.state.doc)) dirty = true\n}\neditor.on('update', onUpdate)\n\n\u002F\u002F 页面退出时移除应用自己的监听：\neditor.off('update', onUpdate)\n","注册并移除同一个函数","ts","",[22,187,188,211,218,262,290,296,314,319,326],{"__ignoreMap":185},[189,190,193,197,200,204,207],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"sDD9d","import",[189,198,199],{"class":195}," type",[189,201,203],{"class":202},"sVPnS"," { QuireEditorUpdateEvent } ",[189,205,206],{"class":195},"from",[189,208,210],{"class":209},"s-HEn"," '@quirekit\u002Fcore'\n",[189,212,214],{"class":191,"line":213},2,[189,215,217],{"emptyLinePlaceholder":216},true,"\n",[189,219,221,224,228,231,234,238,241,244,247,250,253,256,259],{"class":191,"line":220},3,[189,222,223],{"class":195},"const",[189,225,227],{"class":226},"sgQzM"," onUpdate",[189,229,230],{"class":195}," =",[189,232,233],{"class":202}," ({ ",[189,235,237],{"class":236},"sde8i","editor",[189,239,240],{"class":202},", ",[189,242,243],{"class":236},"previousState",[189,245,246],{"class":202}," }",[189,248,249],{"class":195},":",[189,251,252],{"class":226}," QuireEditorUpdateEvent",[189,254,255],{"class":202},") ",[189,257,258],{"class":195},"=>",[189,260,261],{"class":202}," {\n",[189,263,265,268,271,274,277,280,283,286],{"class":191,"line":264},4,[189,266,267],{"class":195},"  if",[189,269,270],{"class":202}," (",[189,272,273],{"class":195},"!",[189,275,276],{"class":202},"previousState.doc.",[189,278,279],{"class":226},"eq",[189,281,282],{"class":202},"(editor.state.doc)) dirty ",[189,284,285],{"class":195},"=",[189,287,289],{"class":288},"sUNQB"," true\n",[189,291,293],{"class":191,"line":292},5,[189,294,295],{"class":202},"}\n",[189,297,299,302,305,308,311],{"class":191,"line":298},6,[189,300,301],{"class":202},"editor.",[189,303,304],{"class":226},"on",[189,306,307],{"class":202},"(",[189,309,310],{"class":209},"'update'",[189,312,313],{"class":202},", onUpdate)\n",[189,315,317],{"class":191,"line":316},7,[189,318,217],{"emptyLinePlaceholder":216},[189,320,322],{"class":191,"line":321},8,[189,323,325],{"class":324},"sqmzS","\u002F\u002F 页面退出时移除应用自己的监听：\n",[189,327,329,331,334,336,338],{"class":191,"line":328},9,[189,330,301],{"class":202},[189,332,333],{"class":226},"off",[189,335,307],{"class":202},[189,337,310],{"class":209},[189,339,313],{"class":202},[10,341,342,343,346,347,350,351,353,354,357,358,360,361,364],{},"这里的 ",[22,344,345],{},"dirty"," 是应用维护的“有未保存修改”状态。",[22,348,349],{},"setEditable()"," 默认也会发出 ",[22,352,111],{},"，因此先比较文档，避免只读切换被当成编辑。",[22,355,356],{},"emitUpdate: false"," 的内容替换不会触发它，恢复流程需自行设置基线。不要在 ",[22,359,111],{}," 中无条件 ",[22,362,363],{},"setContent()","，否则会反复替换用户正在编辑的内容。",[10,366,367,369,370,373,374,377,378,381,382,386],{},[22,368,137],{}," 包含根事务与 ",[22,371,372],{},"appendedTransactions","，回调中的 ",[22,375,376],{},"editor.state"," 是接受插件追加事务后的状态。只看根事务的 ",[22,379,380],{},"docChanged"," 会漏掉追加事务中的修改；也不能把每个事务都当作需要保存的正文变化。完整事件表见",[34,383,385],{"href":384},"\u002Fapi\u002Foptions","配置与事件参考","。",[14,388,389],{"id":389},"异步结果也有生命周期",[10,391,392],{},"加载插件、文件或保存结果返回时，先检查页面和对应任务是否仍有效。较早的结果不能覆盖新草稿，也不能在组件卸载后重新创建实例。",[10,394,395,396,398,399,386],{},"Classic 的产品配置更新与 Core 的内容 ",[22,397,111],{}," 不是同一件事，复用产品时另见 ",[34,400,402],{"href":401},"\u002Fclassic\u002Fconfiguration","Classic 配置",[404,405,406],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":185,"searchDepth":213,"depth":213,"links":408},[409,410,411,412],{"id":16,"depth":213,"text":17},{"id":78,"depth":213,"text":78},{"id":177,"depth":213,"text":177},{"id":389,"depth":213,"text":389},"让组件拥有编辑器，在需要时订阅内容、选区和事务变化。","md",null,"zh-CN",{},"\u002Fconcepts\u002Flifecycle","核心概念",{"title":5,"description":413},"concepts\u002Flifecycle.zh-CN","oJYWLlzc9p7O0n0mG6WBYUcAwahpXJVpE9YQUSTkP-s",1793045209087]